手风琴:
<html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0px; padding:0px; } #box{ 800px; height:300px; border:2px solid #ccc; position: relative; margin:50px auto; overflow: hidden; } #box li{ 800px; height:300px; position: absolute; top:0px; list-style:none; } </style> <script src="move.js"></script> <script> window.onload=function(){ var oBox=document.getElementById("box"); var aLi=oBox.children; var w=30; for(var i=1;i<aLi.length;i++){ //设置每个li的left aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px'; } for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ for(var i=0;i<aLi.length;i++){ if(i<=this.index){ //小于this.index的向左运动,大于的向右运动 move(aLi[i],{left:i*w},{time:1000,easing:'ease-out'}) }else{ move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w},{time:1000,easing:'ease-out'}) } } } } } </script> </head> <body> <ul id="box"> <li ><img src="img/0.jpg" /></li> <li ><img src="img/1.jpg" /></li> <li ><img src="img/2.jpg" /></li> <li ><img src="img/3.jpg" /></li> <li ><img src="img/2.jpg" /></li> <li ><img src="img/1.jpg" /></li> </ul> </body> </html>
回到顶部:
<html> <head> <meta charset="utf-8"> <title></title> <style> #btn{ position: fixed; left:45%; top:45%; display: none; } </style> <script> window.onload=function(){ var oBtn=document.getElementById("btn"); window.onscroll=function(){ var scrollT=document.documentElement.scrollTop||document.body.scrollTop; var timer=null; if(scrollT>200){ oBtn.style.display='block'; }else{oBtn.style.display='none';} oBtn.onclick=function(){ var start=scrollT; //起始位置 var dis=0-start; //总距离 var count=parseInt(2000/30); //运动的总次数 var n=0; //当前运动次数 clearInterval(timer); timer=setInterval(function(){ n++; var a=1-n/count; var cur=start+dis*(1-a*a*a); //减速运动 document.documentElement.scrollTop=document.body.scrollTop=cur; if(n==count){ clearInterval(timer); } },30); } } } </script> </head> <body style="height:2000px;"> <input type="button" id="btn" value="回到顶部"/> </body> </html>
无限运动:
<html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ 150px; height:150px; border-radius:50%; background: red; position: absolute; left:0; top:0px; } #btn{ position: absolute; top:50px; right:50px; } </style> <script src="move.js"></script> <script> window.onload=function(){ var oBox=document.getElementById("box"); var oBtn=document.getElementById("btn"); var arr=[ //用于存放运动路径 {left:0,top:0}, {left:500,top:0}, {left:500,top:500}, {left:0,top:500} ]; var iNow=0; //下一步路径的下标 oBtn.onclick=function(){ next(); } function next(){ iNow++; if(iNow==arr.length){iNow=0;} move(oBox,arr[iNow],{time:1000,easing:'ease-out',fn:next});//回调函数里继续执行next来实现循环运动 } } </script> </head> <body> <input type="button" id="btn" value="按钮"/> <div id="box"></div> </body> </html>