放飞自我 LET DREAMS FLY

[t]照片墙

要点：布局转化、大小变化、位置也要变化

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 * {margin:0; padding:0;}
 6 li {list-style:none;}
 7 #ul1 {width:300px; margin:100px auto; border:1px solid black; position:relative;}
 8 #ul1 li {width:80px; height:80px; background:#CCC; float:left; margin:10px;}
 9 #ul1 li img {width:100%; height:100%;}
10 </style>
11 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
12 <title>无标题文档</title>
13 <script type="text/javascript">
14 function getStyle(obj, attr){
15     return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
16 }    
17 window.onload=function ()
18 {
19     var oUl=document.getElementById('ul1');
20     var aLi=oUl.getElementsByTagName('li');
21     var iMinZindex=1;
22     var i=0;
23     
24     for(i=0; i<aLi.length; i++){
25         aLi[i].style.left = aLi[i].offsetLeft + 'px';
26         aLi[i].style.top = aLi[i].offsetTop + 'px';
27     }
28     for (i = 0; i < aLi.length; i++) {
29         aLi[i].style.position = 'absolute';
30         aLi[i].style.margin = 0;
31     }
32     
33     for(i=0; i<aLi.length; i++){
34         aLi[i].index = i;
35         aLi[i].onmouseover = function(){
36             this.style.zIndex = 10;
37             startMove(this, 160);
38         }
39         aLi[i].onmouseout = function(){
40             this.style.zIndex = 0;
41             startMove(this, 80);
42         }
43     }
44 };
45 
46 function startMove(obj, iTarget){
47     clearInterval(obj.timer);
48     obj.timer = setInterval(function(){
49         doMove(obj, iTarget);
50     }, 30);
51 }
52 function doMove(obj, iTarget){
53     var iCur = parseInt(getStyle(obj, 'width'));
54     var speed = Math.ceil((iTarget-iCur)/5);
55     
56     if(iCur==iTarget){
57         clearInterval(obj.timer);
58     }else{
59         obj.style.width = obj.style.height = (iCur+speed)+'px';
60         obj.style.marginLeft = obj.style.marginTop = -(iCur-80)/2+'px';
61     }
62 }
63 
64 </script>
65 </head>
66 <body>
67 <ul id="ul1">
68     <li><img src="images/1.jpg" /></li>
69     <li><img src="images/2.jpg" /></li>
70     <li><img src="images/3.jpg" /></li>
71     <li><img src="images/4.jpg" /></li>
72     <li><img src="images/5.jpg" /></li>
73     
74     <li><img src="images/6.jpg" /></li>
75     <li><img src="images/7.jpg" /></li>
76     <li><img src="images/8.jpg" /></li>
77     <li><img src="images/9.jpg" /></li>
78 </ul>
79 </body>
80 </html>

 

 

posted on 2012-11-16 16:52  niuben  阅读(332)  评论(0)    收藏  举报

导航