-
获取真正的样式查看全部
-
function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }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); }查看全部
-
Math.round()，四舍五入 设置透明度： 对IE浏览器：filter:alpha(opacity:30); 对其他浏览器：opacity: 0.3; startMove(this,'opacity',100),this指代这个Li1,opacity是参数，也可以是width或者height,100为目标值，透明度的目标值。 Li1.onmouseover=function(){ startMove(this,'opacity',100); } 用getStyle这个方法去获取样式比用setoffWidth,更加准备，getStyle(obj,'width');是获取属性值，setoffWidth是获取整个盒子的值。（加边框） function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }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]; } }查看全部
-
有border/padding属性的div运动时不能用offsetX属性获取div的X,因为offsetX获取的是div盒子的属性 不是conten的属性！ 在用到obj.offsetWidth或者obj.offsetHeight的时候，如果，obj对象的样式有border等属性，则需要用getStyle()函数解决实际width和height值样式不兼容的问题 //获取style样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
多物体运动时，不能共用同一个定时器或同一个变量，会造成争抢导致错误。应该给每个物体单独定义定时器及变量，调用函数时设置当前物体的定时器和变量 /** * 1.3-2多物体透明度 */ window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].timer=null; oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startMove(this,100); } oDiv[i].onmouseout=function(){ startMove(this,30); } } } function startMove(obj,iTarget){ //防止定时器重复使用 clearInterval(obj.timer); //实例化定时器 obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-10; }else{ speed=10; } if(obj.alpha==iTarget){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } }, 30); }查看全部
-
缓冲运动查看全部
-
透明度动画：基于速度动画 alpha=30; ie下透明度范围为0-100：box.style.filter = 'alpha(opacity:'+alpha+')'; 其他浏览器下范围为0-1：box.style.opacity = alpha/100; 设速度值（即透明度递增/减值），速度值的正负与当前透明度和目标透明度大小相关。 当前透明度>目标透明度，速度值为负 当前透明度<目标透明度，速度值为正 每一次调用函数前，需clearInterval()把前一次的定时器清除。查看全部
-
透明度查看全部
-
/*1.3精简参数, iTarget:偏移目标值 用当前offsetLeft的值与传入的目标值来判断增加和减少 */ function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); timer= setInterval(function(){ var speed=0; //如果当前值大于目标就是正向运动 if(oDiv.offsetLeft > iTarget){ speed=-10; }else{ //如果小于目标值就是反向运动 speed=10; }; if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); }查看全部
-
start move 开始移动（0，100）移动到哪里停止查看全部
-
js对json的处理查看全部
-
运动框架实现思路查看全部
-
jQuery里已有的一个动画框架，与之前的js封装相似，还可以考虑使用css3的方法实现动画效果查看全部
-
设置内联样式 obj.style.width=parseInt(obj.style.width)+speed+"px"; 使用函数获取属性 function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';查看全部
举报
0/150
提交
取消