一个简单的手风琴效果
本人承认有点小bug 高手门多多指点哈
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img window</title> <style type="text/css"> body{text-align:center;} *{margin:0;padding:0;border:none;} #imgmenu{width:600px;height:350px;border:10px solid #D2691E;margin:auto;overflow:hidden;margin-top:40px;} #imgmenu #content{width:800px;float:left;} #imgmenu #content div{float:left;overflow:hidden;} #imgmenu #content div img{border-left:5px solid #DEB887;} </style> </head> <body> <div id="imgmenu"> <div id="content"> <div><img src="images/1.jpg"/></div> <div><img src="images/2.jpg"/></div> <div><img src="images/3.jpg"/></div> <div><img src="images/4.jpg"/></div> <div><img src="images/5.jpg"/></div> <div><img src="images/6.jpg"/></div> </div> </div> <script type="text/javascript"> window.onload=function(){ var timer=null; function getId(Idname){return document.getElementById(Idname)}; var content=getId("content") var imgmenu=getId("imgmenu"); var pics=getId("content").getElementsByTagName("div"); function slide(obj){ var speed=obj.offsetWidth; clearInterval(timer); timer=setInterval(function(){ for(var i=0;i<pics.length;i++){ var speed2=pics[i].offsetWidth; if(pics[i].offsetWidth!=40){ speed2-=Math.ceil((speed2-40)/4); pics[i].style.width=speed2+"px";}; } if(obj.offsetWidth!=400){ speed+=Math.ceil((400-speed)/4); obj.style.width=speed+"px";}; },30); } for(var i=0;i<pics.length;i++){ pics[i].style.width=40+"px"; pics[0].style.width=400+"px"; pics[i].onmouseover=function(){ this.slide=slide(this); } } } </script> </body> </html>
站长帮手:在网络的世界里,我感觉自己无把不能。