-
overflow:hidden;//防止溢出 text-decoration:none;//去除li的小黑dian display:inline-block;//内联块 位置变化，原点-向上移动-固定中间位置-向上运动回到原点查看全部
-
window.load = function(){ var oMove = document.getElementById("move"); var aList = document.getElementByTagName("a"); for(var i=0;i<aList.length;i++){ aList.onmouseover = function(){ var _this = this.getElementByTagName("i")[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.top = 30 + "px"; startMove(_this,{top:20,opacity:100}); }); } } }查看全部
-
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]; } }查看全部
-
同时执行两个定时器函数，后一个函数执行时会清除前一个函数的定时器， 所以实际效果是只执行后一个函数查看全部
-
function getStyle(obj.attr){ if(obj.currentStyle){ //currentStyle针对IE浏览器； return obj.currentStyle[attr];} else{return getComputedStyle(obj,flase)[attr];}} //getComputedStyle 针对Firefox浏览器查看全部
-
function getStyle(obj.attr){ if(obj.currentStyle){ //currentStyle针对IE浏览器； return obj.currentStyle[attr];} else{return getComputedStyle(obj,flase)[attr];}} //getComputedStyle 针对Firefox浏览器查看全部
-
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获取的是像素值查看全部
-
for循环，为没一个li都绑定一个onmouseover事件查看全部
-
避免重复多次启动计时器，可以在启动计时器前先清空计时器，这样就不会有重复的计时器使用了。查看全部
-
运动模式： 1. 速度 => 改变left、right、width、height、opacity 2. 缓冲运动 3. 多物体运动 4. 任意值变化 5. 链式运动 6. 同时运动查看全部
-
Math.round();四舍五入取整查看全部
-
obj.timer=setInterval(function() 设置定时器的同时给obj.timer赋值了。 全局增加timer=null，定义一个变量，每次执行前变量为空值应该也能起到清除定时器的作用查看全部
-
由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的，会把0.75去掉，那么div的left就成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。查看全部
-
currentStyle getComputeStyle查看全部
-
function getStyle(obj.attr){ if(obj.currentStyle){ //currentStyle针对IE浏览器； return obj.currentStyle[attr];} else{return getComputedStyle(obj,flase)[attr];}} //getComputedStyle 针对Firefox浏览器查看全部
举报
0/150
提交
取消