-
多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };查看全部
-
qq_小天狼星_0 匀速运动：<br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数<br>查看全部
-
用toFix()解决浮点数不相等造成无法清除定时器的问题<即出现一闪一闪> <script> window.onload=function() { var div1 = document.getElementById('div1'); div1.onmouseover = function () { stChange(1); }; div1.onmouseout = function () { stChange(0.3); }; } var opacity1 = 0.5; var timer = null; function stChange(iTarget) { var div1 = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function () { var speed = 0; if (opacity1 < iTarget) { speed = 0.1; } else { speed = -0.1; } if (opacity1.toFixed(1) == iTarget) { //保留一位小数，不然浮点数无法相等，造成无法清除 clearInterval(timer); } else { opacity1 += speed; div1.style.opacity = opacity1; } }, 50); } </script>查看全部
-
getComputedStyle：用于Firefox、Chrome、Safari、Opera等浏览器，作用与currentStyle相同。 currentStyle 指浏览器当前显示的，如果用runtimeStyle 写入新样式，那么这个新样式权重最高，currentStyle的值亦改为新样式，所以可以说currentStyle是style 和 runtimeStyle 的结合。即运行时就是runtimeStyle ，否则就style 或currentStyle 。查看全部
-
style：标准的样式！可用来查询由html标签的style属性指定的样式。 currentStyle：可用来查询/修改外联或者内部样式表中的样式（仅IE、Opera）。 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。当使用currentStyle做条件判断是，要加上body,document.body.currentStyle，这样才能兼容上IE6,7。 runtimeStyle： 运行时的样式！如果与style的属性重叠，将覆盖style的属性。代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。查看全部
-
//缓冲系数10 var speed = (iTarget-oDiv.offsetLeft)/10; //如果速度是正的 则向上取整。速度是负的向下取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);查看全部
-
mark 移除时，需要一步一步的还原回去查看全部
-
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> <style type='text/css'> *{ margin:0px; padding:0px; } li{ width:200px; height:100px; margin:20px; list-style:none; background-color:yellow; opacity:0.3; } </style> <script type='text/javascript'> window.onload=function(){ var oLi=document.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++){ oLi[i].onmouseover=function(){ var that=this; startMove(this,{width:400,height:200},function(){ startMove(that,{opacity:100}); }); } oLi[i].onmouseout=function(){ var that=this; startMove(this,{height:100,width:200},function(){ startMove(that,{opacity:30}) }); } } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var flag = true; var icur=null; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,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'){ obj.style.filter='alpha(opacity:'+(icur+speed); obj.style.opacity=(icur+speed)/100; } else{ obj.style[attr]=icur+speed+'px'; } } if (flag) { clearInterval(obj.timer); if(fn) { fn(); } } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>查看全部 -
function startMove(obj,attr,iTarget,fn){ //添加一个回调函数fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
查看全部 -
运动框架实现思路
速度（改变值left,right,width,height,opacity）
缓冲运动
多物体运动
任意值变化
链式运动
同时运动
查看全部 -
setInterval（函数，毫秒） 定时器
onmouseover 鼠标移入
onmouseout 鼠标移出
object.style.left 修改left
object.offsetLeft 当前的left
object.style.left=object.offsetLeft+num'px'
clearInterval 清除定时器
记得一开始执行函数的时候应该清空定时器
查看全部 -
<script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = (offleft - oDiv.offsetLeft)/10; speed = speed > 0 ?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft == offleft ){ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); } </script>查看全部
-
Math.floor(x)：非四舍五入，向下取整，eg:x=3.4 或者 x=3.9 ,最终Math.floor(x)都等于3. Math.ceil(x):向上取整。查看全部
-
这里有两个BUG：第一个肯定是不能执行回调涵数。只要把flag=true放到定时器下面。 第二个就是当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样两个BUG就都解决了 <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('move'); var aList=oDiv.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:100}) }); } } } </script>查看全部
-
缓冲运动中：向上取整Math.ceil(),向下取整Math.floor() 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,此时speed速度为0.75。而浏览器是不允许出现小数的，会把0.75去掉，那么就速度为0 不动了。那么div的left就变成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。 所以 向右移动 速度为正 就将变成小数的速度 向上取整 为1 向左移动 速度为负 就将变成负小数的速度向下取整 取整原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。 这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目标值-当前值)/10 不能整除的话。运动到最后，是1~9之间的数字来除以10，结果是个小于1的小数，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味着不再发生变化。也就是说，当速度大于0的时候，如果用Math.floor(speed),最后不到10个像素的时候，就不会动了。所以要用Math.ceil向上取整。同理，当速度<0时，要用Math.ceil()取整。查看全部
举报
0/150
提交
取消