-
<!-- 使用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】查看全部
-
参数的使用查看全部
-
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。 clientWidth是对象看到的宽度（含padding，不含border） offsetWidth是指对象自身的宽度（含padding，含border） scrollWidth是对象实际内容的宽度（含padding，含border，含滚动条） JS中 obj.style.attr 只能获取行内样式 要获取非行内样式要通过obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法获取 可以封装为function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr]}} obj.offsetWidth 返回值是数值所以不用parseInt（）；而obj.style.width获取的是像素值 （当给div增加边框值时，且宽度在内联样式里设置，js中obj.offsetWidth返回值中包括有边框，所以会导致js程序中数值的判断有误。当把宽度设置到行内样式时，上述的现象则没有。）查看全部
-
运动框架实现思路 1、速度(改变值left、right、width、height、opcity) 2、缓冲运动 3、多物体运动 4、任意值变化 5、链式运动 6、同时运动查看全部
-
parseInt(getStyle(obj,'width'))查看全部
-
解决startMove(obj,attr,iTarget)函数的两个bug： 1、当attr为opacity时，parseInt获取值可能永远为0；因此代码修改为： if(attr == "opacity"){ icur = Math.round(parseFloat(getStyle(obj,attr)) * 100; } else{ icur = parseInt(getStyle(obj,attr), 10); } 2、当attr为opacity或其他非px单位的属性时，obj.style[attr]显示值单位异常；因此代码修改为： if(attr == "opacity"){ obj.style.filter = "filter:alpha(opacity:" + (icur + speed) + ")"; obj.style.opacity = (icur + speed) / 100; } else{ obj.style[attr] = icur + speed + "px"; } 注意： 1、计算机不能精确处理浮点数，因此浮点数一般不用来做比较或一些精确度要求较高的计算；因此此处的parseFloat值还要用Math.round四舍五入一下。 2、parseInt的第二个参数（表示进制）最好写上。如果第一个参数是字符串，那么parseInt会将"0x"开头的string当做16进制数、将"0"开头的string当做8进制数。 3、parseInt和parseFloat要求string的第一个字符必须为数字，否则返回NaN；parseInt会将string中的第一个非数字字符及其后的字符全部丢弃，而parseFloat会将string中的第一个非数字字符（除了第一个点号及点号后紧跟的数字）及其后的字符全部丢弃。 4、当+运算的一边为字符串时，会优先执行字符串连接操作，因此有数学运算时最好用括号包含或用另一个变量表示。查看全部
-
var box=document.getElementById("box"); box.style.opacity=0.1; box.onmouseover=function(){ changeopto(1); } box.onmouseout=function(){ changeopto(0.1); } var timer=null; var alpha=0.1; function changeopto(newOp){ var box=document.getElementById("box"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if (newOp<alpha){ cgspeed=-0.01; alpha+=cgspeed; box.style.opacity=alpha; } if (newOp>alpha){ cgspeed=0.01; alpha+=cgspeed; box.style.opacity=alpha; } if (newOp==alpha){ clearInterval(timer); } },10); }查看全部
-
JS动画运动框架查看全部
-
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true; //标志所有运动是否到达目标值 for(var attr in json){ var curr=0; //获取当前的值，设置为0下面进行赋值 //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); //对透明度处理 }else{ curr=parseInt(getStyle(obj,attr)); //对普通的宽高处理 } //移动速度处理 var speed=0; speed=(json[attr]-curr)/8; //json[attr]为属性值即目标值 speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整数，将速度取整从而达到目标值 //检测停止 if(curr!= json[attr]){ flag=false;//检测为false则继续下面的操作 } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+’)’;//IE浏览器 obj.style.opacity=(curr+speed)/100;//firefox浏览器 }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ //检测为true则继续下面的操作 clearInterval(obj.timer); if(fn){ //检测是否有回调函数，有就执行 fn(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE取样式 }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
避免重复多次启动计时器，可以在启动计时器前先清空计时器，这样就不会有重复的计时器使用了。 尽量减少参数，能写进函数的就写进函数查看全部
-
JS中 obj.style.attr 只能获取行内样式 要获取非行内样式要通过obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法获取 可以封装为function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr]}} obj.offsetWidth 返回值是数值所以不用parseInt（）；而obj.style.width获取的是像素值查看全部
-
缓冲运动中：向上取整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()取整。查看全部
-
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true; //标志所有运动是否到达目标值 for(var attr in json){ var curr=0; //获取当前的值，设置为0下面进行赋值 //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); //对透明度处理 }else{ curr=parseInt(getStyle(obj,attr)); //对普通的宽高处理 } //移动速度处理 var speed=0; speed=(json[attr]-curr)/8; //json[attr]为属性值即目标值 speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整数，将速度取整从而达到目标值 //检测停止 if(curr!= json[attr]){ flag=false;//检测为false则继续下面的操作 } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+’)’;//IE浏览器 obj.style.opacity=(curr+speed)/100;//firefox浏览器 }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ //检测为true则继续下面的操作 clearInterval(obj.timer); if(fn){ //检测是否有回调函数，有就执行 fn(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE取样式 }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
取整原因：因为有除法，当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()取整。查看全部
-
function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true;//标志所有运动是否到达目标值-----必须放在计时器里面(才能满足判断所有运动是否到达目标值) for(var attr in json) { var curr = 0; if(attr == 'opacity') { curr = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { curr = parseInt(getStyle(obj, attr)); } //移动速度处理 var speed = 0; speed = (json[attr] - curr) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(curr != json[attr]) { flag = false; } if(attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (curr + speed) + ")"; obj.style.opacity = (curr + speed) / 100; } else { obj.style[attr] = curr + speed + 'px'; } } if(flag) { //alert('ok'); clearInterval(obj.timer); if(fn) { fu(); } } }, 30); } function getStyle(obj, attr) { if(obj.currentStyle) { //IE取样式 return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }查看全部
举报
0/150
提交
取消