手风琴:
<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>