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次。

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

这个是基础效果，元素在一个方向（水平或者垂直）上，在一定范围内来回运动。

调用代码如下：

window.onload=function () {
	move_on(document.getElementById("moveE"),600,1,0,1);
}

调用代码要在元素后面执行，能保证这点的话就不需要加window.onload或document.ready。

来理解一下参数的含义：
移动的元素是moveE，移动的距离是600像素，移动方向是水平向右，移动次数不限制（所以会来回跑），定时器每隔1毫秒执行一次。

如果想改成垂直运动，就把第三个参数改了。如果只运动一次，就把第4个参数改成1。那样元素移动到指定距离之后就不动了。其他的参数很简单，没什么可说的。

这个例子让元素斜向运动并且限制在一定范围内。

怎么让元素斜向移动的呢？很简单，同时启动两个定时器，一个做水平方向的运动，一个做垂直方向的运动。

代码如下：

window.onload=function () {
	var moveE=document.getElementById("moveE");
	var _width=500-moveE.offsetWidth;
	var _height=400-moveE.offsetHeight;
	move_on(moveE,_width,1,0,1);
	move_on(moveE,_height,3,0,1);
}

由于移动是往复进行的，所以自然就有了反弹效果。

这里由于要获取元素宽高信息，最好是加在window.onload或document.ready里执行。如果想改变移动范围，那就修改_width、_height里的数字为你想要的距离。

如果元素在页面左上角，那就不适合向左上方斜着运动，不然可能就跑出页面范围外了。所以如果你想让元素往左上方运动，就别把元素放到左上角。这个地方只是提醒一下。

如果想让元素在整个页面上来回移动反弹（文章最开始的demo），也很简单。相比上面的斜向运动，只是修改了宽高范围、修改了元素起始位置等属性。

代码如下：

window.onload=function () {
	var moveE=document.getElementById("moveE");
	moveE.style.position="fixed";
	moveE.style.left=0;
	moveE.style.top=0;
	moveE.style.zIndex=999999;
	moveE.style.margin=0;
	var moveWidth=document.body.scrollWidth-moveE.offsetWidth;
	var moveHeight=window.innerHeight-moveE.offsetHeight;
	move_on(moveE,moveWidth,1,0,1);
	move_on(moveE,moveHeight,3,0,1);
}

这里把元素改成从左上角向右下方向运动。如果你想改起始坐标、改运动方向，都是可以的。

最后再扩展一下。上面做斜向运动时，定时器都是1毫秒，所以运动路线是45度角的。可以修改成不容的时间间隔来控制路线的角度。

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