-
获取样式的函数查看全部
-
1、速度的定义： var speed=(目标值-当前值（offset）)/参数； 2、取整函数： 向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);// 条件操作位 这个表达式的意思是如果speed大于0（关系表达式返回true），则将Math.ceil(speed)向下去整赋值给 speed，反之则将Math.floor(speed)向上去整赋值给 speed查看全部
-
var flag = true; 这句要放在定时器setInterval()器里面，才能解决链式运动（Fn）无法实现的问题。查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true; //标志所有运动是否到达目标值 for(var attr in json){ //取当前值 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)/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)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag) { clearInterval(obj.timer); flag = true; if(fn){ fn(); } } } },20); }查看全部
-
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width 而width仅仅是自身的宽度 获取样式，解决兼容性 //obj 节点对象 //attr 属性名 2.function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//IE } else { return getComputedStyle(obj,false)[attr]; } }查看全部
-
多物体运动 1. for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 2. 利用参数中的this来指定所选择的当前元素 3. 多物体不要共用一个值,在对象上定义一个单独的属性 （存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。） <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); } } };查看全部
-
鼠标快速移入移出有bug，待解决 △一般使用动画时，都要运用向上向下取整 1、速度的定义： var speed=(目标值-当前值（offset）)/参数； 2、取整函数： 向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);//查看全部
-
透明度的调试查看全部
-
$(function()){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300) $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }查看全部
-
window.onload=function(){<br> var oMove=document.getElementById('move');<br> var alist=oMove.getElementByTagName('a');<br> for( var i=0;i<aList.length;i++){<br> aList[i].onmouseover=function(){<br> var _this=this.getElementByTagName('i')[0];<br> startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20:opacity:100}) });<br> }<br> }<br> }查看全部
-
json:完美运动框架 属性和目标值是一对键值对attr/iTarget json实现多对值的变化 startMove(obj,{attr1:iTartget1,attr2:iTartget2},fn); startMove(obj,json,fn){}查看全部
-
回调函数，一层一层嵌套<br> onmouseover从外到里<br> onmouseout从里到外 框架里四个参数查看全部
-
回调函数：fn查看全部
-
1、获取当前透明度不用parseInt<br> 2、设置透明度要考虑兼容<br> obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')';<br> obj.style.opacity=(当前透明度+变化速度)/100;<br>针对chrome和火狐浏览器 3、透明度不加“px”<br> 在使用parseInt()时处理透明度小数时,会有影响 单位设置<br> 相应位置进行判断 IE/FireFox<br> 取相应值 Math.round()四舍五入取整数值<br> Math.round(parseFloat(getStyle(obj,attr))*100)查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }查看全部
举报
0/150
提交
取消