-
var timer = null; function startMove(iTarget) { clearInterval(timer); timer = setInterval(function(){ var speed = 0; var oDiv = document.getElementById("oDiv"); speed = (iTarget-oDiv.offsetLeft)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if (oDiv.offsetLeft!=iTarget){ oDiv.style.left = oDiv.offsetLeft + speed +"px"; } },30) } window.onload = function() { var oDiv = document.getElementById("oDiv"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function () { startMove(-200); } }
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//速度如果没有取整，会导致无法到达目标，一则占用资源
查看全部 -
offsetLeft：当前值
查看全部 -
运动框架实现思路查看全部
-
//做了验证，在动画完执行后，定时器确实没有被清除，flag没起作用 function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } var alpha = 30; function startMove(objj,json,fn) { var flag = true; clearInterval(objj.timer); objj.timer = setInterval(function () { var icur = 0; for(var attr in json){ if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(objj,attr))*100); }else{ icur = parseInt(getStyle(objj,attr)); } var speed = (json[attr] - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur != json[attr]){ flag = false; } if (attr == 'opacity') { objj.style.filter = 'alpha(opacity:'+icur+speed+')'; objj.style.opacity = (icur+speed)/100; } else { objj.style[attr] = icur+speed+'px'; } if (flag) { console.log('未输出任何内容，证明动画执行完后未清除定时器'); clearInterval(objj.timer); if(fn){ fn(); } } } },30); }查看全部
-
//注释所有flag代码，动画仍然正确执行，不知道此时定时器是否清除 function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } var alpha = 30; function startMove(objj,json,fn) { //var flag = true; clearInterval(objj.timer); objj.timer = setInterval(function () { var icur = 0; for(var attr in json){ if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(objj,attr))*100); }else{ icur = parseInt(getStyle(objj,attr)); } var speed = (json[attr] - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); // if(icur != json[attr]){ // flag = false; // } if (attr == 'opacity') { objj.style.filter = 'alpha(opacity:'+icur+speed+')'; objj.style.opacity = (icur+speed)/100; } else { objj.style[attr] = icur+speed+'px'; } // if (flag) { // clearInterval(objj.timer); // if(fn){ // fn(); // } // } } },30); }查看全部
-
获取样式 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr];//IE浏览器 } else { return getComputedStyle(obj, false)[attr];//firefox浏览器 } }查看全部
-
speed=speed>0?Math.ceil(speed):Math.floor(speed);查看全部
-
filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。查看全部
-
<!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】 var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = "alpha(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它们的这个系数的满值是100，这里需要的满值是1） } },30) }查看全部
-
匀速运动：<br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数<br>查看全部
-
1.速度（改变值left,right,width,height.opacity透明度） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
JSON 轻量级数量交互查看全部
-
两个startMove函数异步进行，第一个函数相当于通知它去改变宽度,通知完之后，不管完成没完成，都继续执行第二个函数了，而第二个函数里面也有clearInterval();就把前一个未执行完的动画清除了，相当于覆盖了。（改变宽度可能要300ms,而通知可能就要1ms,第二个函数通知的时候也就1ms，很快，就相当于覆盖了） 如果同时调用多个startMove函数，后面的startMove会清除掉前面的startMove的定时器（因为startMove函数中第一句就是clearInterval）。因此实际只有最后一个startMove被执行了查看全部
-
四舍五入查看全部
-
运动框架实现思路： 1.速度（改变值Left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 （如：先宽后高） 6.同时运动 （如：宽高同时运动）查看全部
举报