一个JS中div运动抖动的问题 50

代码如下，问题是这样的，我用了一个缓冲运动框架，来对div的属性进行操作，可以看到，当鼠标移入的时候，宽高会变大，而且位置也会发生变化，问题是如果你仔细看的话，会发现在d... 代码如下，问题是这样的，我用了一个缓冲运动框架，来对div的属性进行操作，可以看到，当鼠标移入的时候，宽高会变大，而且位置也会发生变化，问题是如果你仔细看的话，会发现在div变大的过程中，会发生轻微的抖动，问题大概是因为缓冲运动的速度不够精确，但是，要怎么修复这个bug？
——————————————————————————————————————
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
#div1 {
width:100px; height:100px;
background:#f93;
position:absolute;
left:200px; top:200px;
margin:0;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(oDiv,{width:200, height:200, marginLeft:-50, marginTop:-50});
}
oDiv.onmouseout = function(){
startMove(oDiv,{width:100, height:100, marginLeft:0, marginTop:0});
}
}
function getStyle(obj,attr){
return obj.currentStyle? obj.currentStyle[attr]: getComputedStyle(obj)[attr];
}
function startMove(obj,json,endFn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var onOff = true;
for(var attr in json){
//1.取当前值
var iCur = 0;
if(attr == 'opacity'){
iCur = parseInt(parseFloat(getStyle(obj,attr)) * 100);
}
else{
iCur = parseInt(getStyle(obj,attr));
}

//2.计算速度
var speed = (json[attr] - iCur)/8;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

//判断是否到达终点
if(iCur !== json[attr]){
onOff = false;
if(attr == 'opacity' ){
obj.style.opacity = (iCur + speed)/100;
obj.style.filter = 'alpha(opacity=' + (iCur + speed) + ');'
}else{
obj.style[attr] = (iCur + speed) + 'px';
}
}
}
if(onOff){
clearInterval(obj.timer);
endFn && endFn();
}
},30)
}

</script>
</head>

<body>
<div id="div1"></div>
</body>
</html> 展开

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

百度网友c45032d
2016-05-19 · TA获得超过3387个赞

知道大有可为答主

回答量：2201

采纳率：12%

帮助的人：926万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style>
		#div1 {
			width:100px; 
			height:100px;
			background:#f93;
			position:absolute;
			left:200px; 
			top:200px;
		}
		#div2 {
			width:100px; 
			height:100px;
			background:#f00;
			position:absolute;
			left:200px; 
			top:400px;
			-webkit-transition:all 1s linear;
			-moz-transition:all 1s linear;
			-ms-transition:all 1s linear;
			-o-transition:all 1s linear;
			transition:all 1s linear;
		}
		#div2:hover{
			-webkit-transform: scale(2,2);
			-moz-transform: scale(2,2);
			-ms-transform: scale(2,2);
			-o-transform: scale(2,2);
			transform: scale(2,2);
		}
	</style>
	<script>
		window.onload = function(){
			var oDiv = document.getElementById('div1');
			oDiv.onmouseover = function(){
				startMove(oDiv,{width:200, height:200, marginLeft:-50, marginTop:-50});
			}
			oDiv.onmouseout = function(){
				startMove(oDiv,{width:100, height:100, marginLeft:0, marginTop:0});
			}
		}
		function getStyle(obj,attr){
			return obj.currentStyle? obj.currentStyle[attr]: getComputedStyle(obj)[attr];
		}
		function startMove(obj,json,endFn){
			clearInterval(obj.timer);
			obj.timer = setInterval(function(){
				var onOff = true;
				for(var attr in json){
//1.取当前值
var iCur = 0;
if(attr == 'opacity'){
	iCur = parseInt(parseFloat(getStyle(obj,attr)) * 100);
}
else{
	iCur = parseInt(getStyle(obj,attr));
}

//2.计算速度
var speed = (json[attr] - iCur)/8;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

//判断是否到达终点
if(iCur !== json[attr]){
	onOff = false;
	if(attr == 'opacity' ){
		obj.style.opacity = (iCur + speed)/100;
		obj.style.filter = 'alpha(opacity=' + (iCur + speed) + ');'
	}else{
		obj.style[attr] = (iCur + speed) + 'px';
	}
}
}
if(onOff){
	clearInterval(obj.timer);
	endFn && endFn();
}
},30)
		}

	</script>
</head>

<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>

赞同用css3实现，比js更方便简洁，可以看下这个代码，我做了个红色的，纯ccs实现这个效果

已赞过 已踩过<

评论收起

可靠的小巴
2016-05-19 · TA获得超过280个赞

知道小有建树答主

回答量：203

采纳率：66%

帮助的人：96万

我也去答题访问个人页

关注

展开全部

css3 不是有动画效果吗？比较全面方便你想要什麼效果直接写成CSS3 就好了移动上去添加一个CLASS 移开删除这个CLASS
能用 css 就用CSS 不能再用JS

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

一个JS中div运动抖动的问题 50

其他类似问题

为你推荐：