-
仅限于本例子 下面代码更容易理解 但是老师的代码是我们更应该注意的 老师将2种效果用一个封装的函数实现 日后老师的方法将更实用 我们开发时应该首先考虑怎么让IF内的表达式相近 更利于此种方法实现 function startMove(){ clearInterval(this.timer); var oDiv=document.getElementById('div1'); this.timer=setInterval(function(){ if(oDiv.offsetLeft<0){ oDiv.style.left = oDiv.offsetLeft+1+'px'; } },30); } function startReturn(){ clearInterval(this.timer); var oDiv=document.getElementById('div1'); this.timer=setInterval(function(){ if(oDiv.offsetLeft>-200){ oDiv.style.left = oDiv.offsetLeft-1+'px'; } },30); }查看全部
-
ddd查看全部
-
多物体运动查看全部
-
实现思路查看全部
-
缓冲运动查看全部
-
取整原因：因为有除法，当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()取整。查看全部
-
<!-- 使用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) }查看全部
-
body,div{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } window.onload=function div1(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ star(100); } div1.onmouseout=function(){ star(30); } } var timer=null; var alpha=30; function star(it){ var div1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>it){ speed=-10; } else{ speed=10; } if(alpha==it){ clearInterval(timer); } else{ alpha+=speed; div1.style.filter='alpha(opacity:+alpha+)'; div1.style.opacity=alpha/100; } },300); } <div id="div1"></div>查看全部
-
将鼠标滑过图片移出： var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ //当鼠标滑过是执行以下函数 startMove(); } var timer = null; function startMove(){ /*clearInterval(timer); //这一步就是将所有定时器关闭，使图片始终以设置的像素匀速移出*/ var oDiv = document.getElementById('div1'); timer = setInterval(function(){ //设置一个定时器 if (oDiv.offsetLeft == 0){ //判断是否可以停止运动的条件 clearInterval(timer); //达到条件就将定时器任务停止 } else { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; //设置每毫秒向左平移10px } }， 30)查看全部
-
window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ //鼠标经过时执行 startMove(); } oDiv.onmouseout=function(){ //鼠标移开时执行 startMove1(); } } var timer=null; function startMove(){ clearInterval(timer); //每次执行前，清除定时器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+10+'px'; } },30); } function startMove1(){ clearInterval(timer); //每次执行前，清除定时器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==-200){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft-10+'px'; } },30); } body,div,span{margin:0;padding:0;} #div1{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;} #div1 span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;} <div id="div1"><span id="share">分享</span></div>查看全部
-
运动模式： 1. 速度 => 改变left、right、width、height、opacity 2. 缓冲运动 3. 多物体运动 4. 任意值变化 5. 链式运动 6. 同时运动查看全部
-
<!DOCTYLE html> <html> <head> <meta charset="utf-8"> <title>JS移动动画</title> <style type="text/css"> *{margin:0;padding:0;} #menu{width:200px;height:200px;background:lightblue;position:relative;left:-200px;top:0;} #btnx{width:30px;height:60px;background:green;position:absolute;left:100%;top:50%;margin-top:-30px;} </style> <script type="text/javascript"> window.onload = function(){ var menu = document.getElementById('menu'); menu.onmouseover = function(){ startMove(0); } menu.onmouseout = function(){ startMove(-200); } } var timer = null; function startMove(iTarget){ clearInterval(timer); var menu = document.getElementById('menu'); timer = setInterval(function(){ var speed = 0; if(menu.offsetLeft < iTarget){ speed = 10; }else{ speed = -10; } if(menu.offsetLeft == iTarget){ clearInterval(timer); }else{ menu.style.left = menu.offsetLeft + speed +'px'; } },25); } </script> </head> <body> <div id="menu"><div id="btnx"></div></div> </body> </html>查看全部
-
body,div{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } window.onload=function div1(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ star(100); } div1.onmouseout=function(){ star(30); } } var timer=null; var alpha=30; function star(it){ var div1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>it){ speed=-10; } else{ speed=10; } if(alpha==it){ clearInterval(timer); } else{ alpha+=speed; div1.style.filter='alpha(opacity:+alpha+)'; div1.style.opacity=alpha/100; } },300); } <div id="div1"></div>查看全部
-
window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ //鼠标经过时执行 startMove(); } oDiv.onmouseout=function(){ //鼠标移开时执行 startMove1(); } } var timer=null; function startMove(){ clearInterval(timer); //每次执行前，清除定时器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+10+'px'; } },30); } function startMove1(){ clearInterval(timer); //每次执行前，清除定时器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==-200){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft-10+'px'; } },30); } body,div,span{margin:0;padding:0;} #div1{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;} #div1 span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;} <div id="div1"><span id="share">分享</span></div>查看全部
-
.filter="alpha(opacity:"+alpha+")" 前面两个引号为一对，后面两个引号为一对。用来传给css用的filter.查看全部
举报
0/150
提交
取消