saber 酱的抱枕

今天用js做了个元素移动的效果，支持水平、垂直方向上的单次移动和来回移动，支持斜向运动（斜向运动时自带反弹效果 哈哈）。

假设这个元素是我们想要移动的：

<img id="moveE" src="http://www.saber.我爱你/wp-content/uploads/2014/07/1_b.gif">

它可以是图片，也可以是其他元素。可以定义css样式，这个没关系。

js代码如下：

function move_on(element,far,to,cishu,time) {
	var add=(to%2==1)?true:false;
	var num=(to<3)?((element.style.marginLeft==="")?0:parseInt(element.style.marginLeft)):((element.style.marginTop==="")?0:parseInt(element.style.marginTop));
	var max=(to%2==1)?(num+far):num;
	var min=(to%2==1)?num:(num+far);
	var time=setInterval(function  () {
	    if(add){
	        num++;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num>=max){
	            add=false;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }else{
	        num--;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num<=min){
	            add=true;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }
	},time);
}

（代码挺短的吧~三元操作符真是个好东西啊

参数解释：

要移动的元素、移动多少像素、移动类型、移动次数、定时器执行间隔时间（毫秒）
移动类型规定如下：
1 左右来回移动，起始点是从左向右
2 左右来回移动，起始点是从右向左
3 上下来回移动，起始点是从上向下
4 上下来回移动，起始点是从下向上
移动次数定义如下：
为0时为无限制来回移动，否则定义为多少则移动多少次。注意，一次单向运动算1次，一次来回运动算2次。

可能看的有点迷，没关系，接下来我一个个上例子。
Read More →

js做的元素不间断来回移动的效果