JS动画效果_技术问答

自欺欺人3104318

为啥我频繁移动鼠标后，立即移出，宽度成这样了: 就是没有把画面跟上; 2021-03-23 1回答·649浏览

自欺欺人3104318

为什么加了getStyle(obj, attr)没有解决问题: 是里面的方法写的有问题; 2021-03-23 1回答·761浏览

专注程序不可自拔

timer和alpha的疑惑: 已采纳 qq_缔造者_03554660 的回答; 在move.js里面有定义; 2018-11-20 1回答·1048浏览

_半人

为什么目标值是400，可是元素只到393就一直死循环，: 你在浏览器里调试一下，就很容易发现问题的，我写代码时，第一遍，总出点毛病，调式多了，就会了；; 2018-08-23 4回答·1060浏览

qq_Justcomplete_04021004

帮忙看看，不知道哪出错了: obj.style.attr=icur+speed+'px';改为 obj.style[attr]=icur+speed+'px';自己找到问题所在了; 2017-09-08 1回答·969浏览

我爱小小小橘子

直接加上边框后，js显示效果正常，width并没有变大。: 已采纳加油冲刺的回答; 浏览器兼容问题; 2017-07-13 2回答·1164浏览

箫闻

关于timer=null的问题: obj.timer=setInterval(......) 这里已经给予定时器了这里的timer其实是没有多少意义的因为后续的处理都是针对各个对象的定时器而不是这个命名的timer 所以这个例子注释掉是没有影响的这个timer在整个程序运行过程中其实并没有参与; 2017-04-10 1回答·1192浏览

徐锦杰

ommouseover绑定两个同名的函数为什么第一个函数就不执行了？代码如下: 已采纳 qq_高冷倒带_03770646 的回答; 因为只有一个定时器。你调用两次。。。; 2017-03-08 2回答·1064浏览

Mr_国产青年Javency

为什么跟老师敲的一毛一样但我的运行不了啊？？？: 2017-02-28 3回答·748浏览

慕粉2245163752

为啥要给宽加中括号啊？: 已采纳一二得三的回答; 中括号？你指的JSON吗？你是不是想问json属性名是否需要加引号？通常情况下不加引号可以使用，但json作为一种通用性的数据格式，所以必须保持严格性，不然在跨语言开发就会很麻烦，并且不加引号的话，在JS中有时也会造成混乱，所以必须为了保证其严格性，必须要加引号。; 2017-02-09 2回答·1258浏览

昨天今天0

加了getstyle()没有效果了: 已采纳 littlemin 的回答; var icur=parseInt(getStyle(obj,'width'));位置不对; 2017-01-02 1回答·1105浏览

di7xian

为什么鼠标移开后，width到256px就不再减少了？

你可以封装一个函数来得到当前元素的宽度，就不会受边框宽度的影响了。

//获取样式

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];//IE

}else{

return getComputedStyle(obj,false)[attr];//firefox

}

这样来进行运动obj为运动的元素

obj.style.width=parseInt(getStyle(obj,"width"))-1+"px";

2016-12-01 2回答·873浏览

qq_耿阳阳_0

代码有错的: 28行少加一个括号，30行也错了。; 2016-11-22 1回答·641浏览

AINIforever

要让谷歌浏览器实现此特效怎么办呢，这个特效我测试了只能用IE打开。: 已采纳 MorningDuGe 的回答; 怎么会老师就是用chrome测试的你粘贴下你的完整代码我看看; 2016-11-13 4回答·909浏览

风骚小王子

求大神帮忙看看为啥不能运行呢！！！！！！

已采纳慕少7532173 的回答

一下是基于题主的代码稍微修改的，可以运行。题主细心察看一下改动之处。
<!DOCTY html>
<html>
<head>
<meta charset="UTF-8">
<title>任意属性/链式运动</title>
<style type="text/css">
body,div{
margin:0;
padding:0;}
#div1{
width:200px;
height:200px;
border:1px solid yellow;
background-color:blue;
}
#div2{
width:200px;
height:200px;
border:1px solid green;
background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){

	var mId=document.getElementById('div1');
    //console.log(getStyle(mId,'width'));
	mId.onmouseover=function(){
		startmove(this,'width',400);}
	mId.onmouseout=function(){
		startmove(this,'width',200);}
}
function getStyle(obj,attr){
	var myStyle=null;
	if(obj.currentStyle){
		myStyle=obj.currentStyle[attr];
	}else{
		myStyle=getComputedStyle(obj,null)[attr];
	}

	return myStyle;
}
var speed=0;
function startmove(obj,attr,target){
	window.clearInterval(obj.timer);
	obj.timer=window.setInterval(function(){
	var att=parseInt(getStyle(obj,attr));
	
	speed=(target-att)/20;
 
	speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
	console.log(speed);
	if(att==target){
	window.clearInterval(obj.timer);

	}else{obj.style[attr]=att+speed+'px';}
	},200);
}
</script>
</head>
<body>
<div id="div1" >
333
</div>
<div id="div2">
222
</div>
</body>
</html>

2016-11-09 2回答·1085浏览

慕函数2913320

getStyle函数在哪里？

自己定义和封装的，不属于js库。

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}

2016-10-21 1回答·876浏览

ZXJ03

请问为什么我实现的效果是这样的？

已采纳嘛也不会的回答

        var timer;
        window.onload = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.onmouseover = function(){
                startMove(this,"height",300);
            }
            div1.onmouseout = function(){
                startMove(this,"height",100);
            }
        }
        function startMove(obj,attr,iTarget){
            clearInterval(timer);
            timer = setInterval(function(){
                var icur = parseInt(getStyle(obj,attr));
                var speed = (iTarget - icur) / 5;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(icur==iTarget){
                    clearInterval(timer);
                }
                else{
                    obj.style[attr] = icur + speed + 'px';
                }
            },50);
        }
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }
            else{
                return getComputedStyle(obj,false)[attr];
            }
        }

var icur = parseInt(getStyle(obj,attr)); 这句写在setInterval 里面否则定时器不能每次获得新的属性值

2016-10-20 2回答·1053浏览