<!doctype html> <html> <head> <meta charset="utf-8"> <title>多图展示</title> <style> ul,li{list-style:none;} img{border:none;} #list{400px; margin:30px auto; position:relative;} #list li{120px; height:100px; display:block; float:left; margin-left:10px; margin-bottom:10px;} #list li img{100%; height:100%;} </style> <script src="js/movement.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function(){ var oList = document.getElementById("list"); var aLi = oList.getElementsByTagName("li"); var iMinZindex = 2; for(var i=0;i<aLi.length;i++){ aLi[i].style.left = aLi[i].offsetLeft+'px'; aLi[i].style.top = aLi[i].offsetTop+'px'; } for(var i=0;i<aLi.length;i++){ aLi[i].style.position = 'absolute'; aLi[i].style.margin = '0'; } //缩放 for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover = function(){ this.style.zIndex = iMinZindex++; move(this,{200,height:160,marginLeft:-40,marginTop:-30}); //(200-120)/2=40 } aLi[i].onmouseout = function(){ move(this,{120,height:100,marginLeft:0,marginTop:0}); } } } </script> </head> <body> <ul id="list"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> <li><img src="images/5.jpg"></li> <li><img src="images/1.jpg"></li> <li><img src="images/4.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/5.jpg"></li> </ul> </body> </html>
附件:
movement.js代码
function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var onoff=true; for(var attr in json){ var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测是否停止 if(icur !=json[attr]){ onoff=false; } if(attr=='opacity'){ //IE obj.style.filter="alpha(opacity='+icur+speed+')"; //firefox obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]= icur+speed+'px'; } } if(onoff){ clearInterval(obj.timer); if(fn){ fn(); } },30); } function getStyle(obj,attr){ //currentStyle针对IE浏览器 getComputedStyle针对火狐浏览器 if(obj.currentStyle){ return currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
效果展示: