-
<script src="move.js"> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, target,fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { //1.取当前值 var icur = 0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj, attr)); } //2.算速度 var speed = (target - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3.检测停止 if (target == icur){ clearInterval(obj.timer); if(fn){ fn.call(obj); } } 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) } </script>查看全部
-
call方法: 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 链式动画其实就是在原来的基础上多传一个参数，作为回调函数，确认一个变化执行完以后就执行该函数。嵌套函数。查看全部
-
解决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、当+运算的一边为字符串时，会优先执行字符串连接操作，因此有数学运算时最好用括号包含或用另一个变量表示。查看全部
-
<script> window.onload = function() { var li1 = document.getElementById('li1'); var li2 = document.getElementById('li2'); var li3 = document.getElementById('li3'); li1.onmouseover = function() { startMove(this, 'height', 400); } li1.onmouseout = function() { startMove(this, 'height', 100); } li2.onmouseover = function() { startMove(this, 'width', 400); } li2.onmouseout = function() { startMove(this, 'width', 200); } } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var icur = parseInt(getStyle(obj, attr)); var speed = (target - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target == icur) clearInterval(obj.timer); else obj.style[attr] = icur + speed + "px"; }, 30) } </script>查看全部
-
offsetxxx属性值包含：元素长或宽+边框+内间距等等 当属性增多时offset就会出现问题，为了解决这些问题就用getStyle函数来代替offset查看全部
-
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){ //currentStyle针对IE浏览器； if(obj.currentStyle){ return bj.currentStyle[attr]; }else{ //getComputedStyle 针对Firefox浏览器 return getComputedStyle(obj,false)[attr] } } obj.offsetWidth 返回值是数值所以不用parseInt（）；而obj.style.width获取的是像素值 （当给div增加边框值时，且宽度在内联样式里设置，js中obj.offsetWidth返回值中包括有边框，所以会导致js程序中数值的判断有误。当把宽度设置到行内样式时，上述的现象则没有。）查看全部
-
<script type="text/javascript"> window.onload = function() { var aLi = document.getElementsByTagName('li'); var aDiv = document.getElementsByTagName('div'); for (var i = 0; i < aLi.length; i++) { aLi[i].timer = null; aLi[i].onmouseover = function() { startMove1(this, 400); } aLi[i].onmouseout = function() { startMove1(this, 200); } } for (var i = 0; i < aDiv.length; i++) { aDiv[i].timer = null; aDiv[i].alpha = 30; aDiv[i].onmouseover = function() { startMove2(this, 100); } aDiv[i].onmouseout = function() { startMove2(this, 30); } } } </script>查看全部
-
function startMove1(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var speed = (target - obj.offsetWidth) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target == obj.offsetWidth) clearInterval(obj.timer); else obj.style.width = obj.offsetWidth + speed + "px"; }, 30) } function startMove2(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var speed = 0; if (obj.alpha > target) speed = -10; else if (obj.alpha < target) speed = 10; if (obj.alpha == target) clearInterval(obj.timer); else { obj.alpha += speed; obj.style.filter = 'alpha(opacity:' + obj.alpha + ')'; obj.style.opacity = obj.alpha / 100; } }, 30) }查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } ul li { width: 200px; height: 100px; background: yellow; margin-bottom: 20px; } div { width: 200px; height: 200px; background: red; margin: 10px; float: left; filter: alpha(opacity : 30); opacity: 0.3; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>查看全部
-
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function() { startMove(-200); } } var timer = null; function startMove(target) { clearInterval(timer); var oDiv = document.getElementById("div1"); var speed = 0; timer = setInterval(function() { speed=(target-oDiv.offsetLeft)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (oDiv.offsetLeft == target) clearInterval(timer); else { oDiv.style.left = oDiv.offsetLeft + speed + "px"; } }, 30) } </script>查看全部
-
缓冲运动中：向上取整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()取整。查看全部
-
<!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。 <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(100); } oDiv.onmouseout = function() { startMove(30); } } var alpha = 30; var timer = null; function startMove(target) { var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function() { var speed = 0; if (alpha > target) { speed = -10; } else if (alpha < target) { speed = 10; } if (alpha == target) { clearInterval(timer); } else { alpha += speed; oDiv.style.filter = 'alpha(opacity' + alpha + ')'; oDiv.style.opacity = alpha / 100; } }, 30) } </script>查看全部
-
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function() { startMove(-200); } } var timer = null; function startMove(target) { clearInterval(timer);//清除计时器 var oDiv = document.getElementById("div1"); var speed = 0; timer = setInterval(function() { if (oDiv.offsetLeft < target) { speed = 1; } else if (oDiv.offsetLeft > target) { speed = -1; } if (oDiv.offsetLeft == target) clearInterval(timer);//当面板移动到目标位置时结束计时器 else { oDiv.style.left = oDiv.offsetLeft + speed + "px"; } }, 30) } </script>查看全部
-
1.速度（改变值Left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 （如：先宽后高） 6.同时运动 （如：宽高同时运动）查看全部
-
<script type="text/javascript"> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ $(this).css('top','30px'); $(this).animate({top:"20px",opacity:"1"},200); }) }) }) </script>查看全部
举报
0/150
提交
取消