-
函数体中的局部变量只在函数执行时生成的调用对象中存在,函数执行完毕时局部变量即刻销毁。就是说你的函数执行到开启定时器以后,就算执行结束了,那么这个局部变量就会被销毁。也就是说刚打开定时器,定时器就没了查看全部
-
var timer=null; function startMove(speed,itarget){ // function startMove(itarget){ clearInterval(timer); var red=document.getElementById('red'); var timer=setInterval(function(){ //单参数方法 /*var speed=0; startMove里面的timer前面不能加var声明 加的话你前面清除的是方面外面的全局timer 然后你每次执行方法都重新定义了一个局部的timer定时器 简单说方面里面定时器的timer不是外面全局的timer查看全部
-
透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=100) 2、由于无法获取对象的透明度,所以可通过变量储存。(var alpha=初始值 alpha+=speed) <script type="text/javascript"> window.onload = function(){ var div1 = document.getElementById('div1'); div1.onmouseover = function(){ startMove(100); } div1.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var div1 = 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; div1.style.filter = 'alpha(opacity:'+alpha+')'; div1.style.opacity = alpha / 100; } },30); } </script>查看全部
-
用clientWidth代替offsetWidth也可以解决,offsetWidth包含了边框,而clientWidth只包含了内边距和内容,不包含外边框, 更加方便。查看全部
-
获取css样式的封装函数,if是针对ie浏览器,else是针对firefox浏览器。查看全部
-
parseInt()的作用是解析一个字符串,并返回一个整数。 width后面带单位"px" 所以要用parseInt()解析一下。查看全部
-
运动框架实现思路查看全部
-
opacity不透明度查看全部
-
当speed>0时,向上取整;当speed<0时,向下取整。 老师的代码鼠标滑入滑出的运行速度都是一样的, 而自己的代码能分别控制速度,更好。查看全部
-
多物体运动,涉及到的公用参数,若是无改变参数可以,若是改变参数则不能共用,会引发各物体争抢的事故,利用对象可编号的特性定义各物体独自的参数体。如obj[i].timer=null(定时器标识),obj[i].alpha=30(透明度标识)查看全部
-
透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=100) 2、由于无法直接修改对象的透明度,所以通过全局变量储存方式。(设定一个全局变量:var alpha=初始值 alpha+=speed) window.onload=function(){ var oDiv2=document.getElementById('div2'); oDiv2.onmouseover=function(){ change(30); }; oDiv2.onmouseout=function(){ change(100); }; }; //透明度运动 var timer2=null, alpha=100; function change(iTarget){ var oDiv2=document.getElementById('div2'); clearInterval(timer2); timer2=setInterval(function(){ if(alpha==iTarget){ clearInterval(timer2); }else{ if (alpha>iTarget) { alpha+=-10; }else{ alpha+=10; } oDiv2.style.opacity=alpha/100; oDiv2.style.filter=':alpha(opacity:'+alpha+')'; } },30); } </script>查看全部
-
多物体运动不能共用任何参数,查看全部
-
//HTML文件中的 window.onload=function(){ var oMain=document.getElementById('move'), oLis=oMain.getElementsByTagName('a'); for (var i = 0; i < oLis.length; i++) { oLis[i].onmouseover=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-20,opacity:0},15,function(){ _this.style.top=40+'px'; startMove(_this,{top:20,opacity:100},15) }); }; } }查看全部
-
//move.js文件 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//if IE } else{ return getComputedStyle(obj,false)[attr];//if firefox } } function startMove(obj,json,time,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var flag=true;//假设所有目标均已完成 var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/10; 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(); } } } },time) }查看全部
-
运动框架实现思路查看全部
举报
0/150
提交
取消