[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>

 

 

你可能感兴趣的:(T)