var t=document.getElementById("t");
var d=document.getElementById("d");
var t1=document.getElementById("t1");
function getArr(){
arr=[];
for(var i=16;i>0;i-=2){
arr.push(-i);
arr.push(i);
}
arr.push(0);
return arr;
}
t1.onmouseover=function(){
this.style.cursor="pointer";
doMove(t1,"top",getArr(),20,-130,200);
}
d.onclick=function(){
if(!t.index){ //undefined==false的结果是false
doMove(t,"left",10,20,-0);
t.index=true;
}else{
doMove(t,"left",-10,20,-130);
t.index=false;
}
//console.log(t.index);
}
/* e是元素,s是元素的属性,p是元素运动的步长,(可以是同一速度就传递一个数.不同的速度可以传递一个数组)
h是元素运动的频率,t是目标点,fun是回调函数
此函数可以省略最后两个参数,这样的话就没有原始位置
tl参数是确定元素的初识位置,防止不在原来的位置
*/
/*使用此函数要事先手动指定元素的位置.
此函数只能改变带有px单位的元素.如颜色的改变不适合本函数 */
function doMove(e,s,p,h,t,tl,fun){
clearInterval(e.timer);
var i=0;
if(tl==0||tl){
e.style[s]=tl+'px';//防止抖动的时候脱离原来的位置.所以先要确定初始位置
}
e.timer=setInterval(function(){
var d=p instanceof Array?p[i]:p;//判断传的步长是数组还是数字
i++;
var speed=parseInt(getStyle(e,s))+d;
if((t||t==0)&&speed>t&&p>0){//注意这里当目标点为0的时候js自动将其转化为false
speed=t;
}
if((t||t==0)&&speed<t&&p<0){
speed=t;
}
e.style[s]=speed+"px";
if((t||t==0)&&speed==t ||i==p.length&& p instanceof Array){
clearInterval(e.timer);
fun && fun();//函数执行完后要执行的函数
}
},h);
}
function getStyle(e,s){
return e.currentStyle?e.currentStyle[s]:getComputedStyle(e)[s];
}
<div id="t">
<div id="d">分享</div>
</div>
<div id="t1">
</div>
*{margin: 0px;padding: 0px;}
#t{width: 130px;height: 130px;background: red;position: absolute;
left: -130px;top: 200px;
}
#d{width: 30px;height: 50px;background: black;position: absolute;left: 130px;top: 35px;color: white;text-align: center;cursor:pointer;}
#t1{width: 130px;height: 130px;background: green;position: absolute;left: 300px;top: 200px;
}
/*使用此函数要事先手动指定元素的位置.*/