                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

能否不使用object.offsetLeft

	<script>
	window.onload=function(){
		var movepart=document.getElementById("movepart");
		movepart.onmouseover=function(){
			rightmove(0);
		}
		movepart.onmouseout=function(){
			rightmove(-1000);
		}
	}
	var funa=null;
	function rightmove (target) {
		clearInterval(funa);
		var movepart=document.getElementById("movepart");
		funa=setInterval(function(){
			var speed=0;
			if (movepart.offsetLeft < target) {
				speed=10;
			}
			if (movepart.offsetLeft > target) {
				speed=-10;
			}
			if (movepart.offsetLeft == target) {
				clearInterval(funa);
			} else{
				movepart.style.left=movepart.offsetLeft+speed+'px';
			}
		},1)
	}
	</script>

之前好像在哪里看到只使用object.style.left，就可以控制的动画的，如何实现？

YoungforU

2015-11-16

源自：JS动画效果 2-1

关注问题我要回答

757

操作

收起

3 回答

李晓健
2015-11-16

首先你的object是什么？如果和你上面的movepart一样，是一个dom节点，那就和你代码是一样的。没什么区别呀。

0 回复有任何疑惑可以回复我~

收起回答

YoungforU 提问者

movepart.style.left的值是200px，有单位，不能拿来和数字比较。如果不用offsetLeft有没有方法解决？然后想着定义一个变量length,来存放left的值（初始是-1000）。但是代码有问题，能帮忙看下吗？如下：

2015-11-16 回复有任何疑惑可以回复我~

YoungforU 提问者
2015-11-16

 funa=setInterval(function(){
	        if (length < target) {
	            length=length+10;
	            movepart.style.left=length+'px';
	        }
	        if (length > target) {
	            length=length-10;
	            movepart.style.left=length+'px';
	        }
	        if (length == target) {
	            clearInterval(funa);
	        }
	    },1)

找到问题了，谢谢！！

0 回复有任何疑惑可以回复我~

收起回答

YoungforU 提问者
2015-11-16

	<script>
	window.onload=function(){
	    var movepart=document.getElementById("movepart");
	    movepart.onmouseover=function(){
	        rightmove(0);
	    }
	    movepart.onmouseout=function(){
	        rightmove(-1000);
	    }
	}
	var funa=null;
	var length=-1000;
	function rightmove(target){
	    clearInterval(funa);
	    var movepart=document.getElementById("movepart");
	    funa=setInterval(function(){
	        if (length < target) {
	            movepart.style.left=length+10+'px';
	        }
	        if (length > target) {
	            movepart.style.left=length-10+'px';
	        }
	        if (length == target) {
	            clearInterval(funa);
	        }
	    },1)
	}
	</script>

0 回复有任何疑惑可以回复我~

收起回答