首页 > 代码库 > Day4-----rollOver
Day4-----rollOver
//-----------------------使用offset属性完成无缝滚动的图片列和其配套的功能
1 <html> 2 <head><title>rollOver</title></head> 3 <style type="text/css"> 4 img,div,li,ul{margin: 0px;padding: 0px;} 5 img{width: 140px;height: 170px;float: left;margin-left: 10px;margin-top: 10px;border: 1px solid gray;} 6 li{list-style-type: none;} 7 #box{width: 460px;height: 190px;background: pink;overflow: hidden;left:;top: 150px;position: absolute;} 8 #roll{position: absolute;left: 0px;width: 460px;} 9 </style>10 <script type="text/javascript">11 window.onload=function(){12 var direction=-2;13 var nowDirection;14 var i;15 var timeout;16 oBtn=document.getElementById(‘direction‘);17 oPause=document.getElementById(‘pause‘);18 oImg=document.getElementsByTagName(‘img‘);19 oDiv=document.getElementById(‘roll‘);20 oBox=document.getElementById(‘box‘);21 oBox.style.left=(screen.width-parseInt(oBox.offsetWidth))/2+‘px‘;22 oDiv.style.width=(oImg[0].offsetWidth+10)*oImg.length+‘px‘;23 oBtn.onclick=function(){24 direction=-direction;25 }26 oPause.onclick=function(){ 27 if(direction!=0){nowDirection=direction;direction=0;} 28 else direction=nowDirection;29 }30 for(i=0;i<oImg.length;i++){31 oImg[i].onmouseover=function(){32 if(direction) nowDirection=direction;33 direction=0;34 this.style.width="200px";35 this.style.border="5px solid gray";36 clearTimeout(timeout);37 }38 oImg[i].onmouseout=function(){39 timeout=setTimeout(function(){direction=nowDirection;},200);40 this.style.border="1px solid gray"41 this.style.width="140px"42 }43 } 44 var timer=setInterval(function(){ 45 oDiv.style.left=(oDiv.offsetLeft+direction)+‘px‘; 46 if(oDiv.offsetLeft<(-oDiv.offsetWidth/2)) 47 oDiv.style.left=0+‘px‘;48 if(oDiv.offsetLeft>0)49 oDiv.style.left=-oDiv.offsetWidth/2+‘px‘;50 },10);51 }52 </script>53 <body>54 55 <div id="box">56 <div id="roll">57 <ul>58 <li><img src="http://www.mamicode.com/pic/pic1.jpg"></li>59 <li><img src="http://www.mamicode.com/pic/pic2.jpg"></li>60 <li><img src="http://www.mamicode.com/pic/pic3.jpg"></li>61 <li><img src="http://www.mamicode.com/pic/pic4.jpg"></li>62 <li><img src="http://www.mamicode.com/pic/pic1.jpg"></li>63 <li><img src="http://www.mamicode.com/pic/pic2.jpg"></li>64 <li><img src="http://www.mamicode.com/pic/pic3.jpg"></li>65 <li><img src="http://www.mamicode.com/pic/pic4.jpg"></li>66 </ul>67 </div>68 </div>69 <div>70 <input type="button" value="http://www.mamicode.com/reverse" id="direction">71 <input type="button" value="http://www.mamicode.com/pause" id="pause">72 </div>73 74 </body>75 </html>
Day4-----rollOver
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。