-
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ 1、取当前的值 2、算速度 3、检测停止 并把iTarget改成json[attr] }) .... } 然后在对应的onmouseover事件中：startMove(oLi,{width:400,height:200});即可达到宽高同时变化的效果 当然startMove(oLi,{width:400,height:200,opacity:100});也可以。查看全部
-
【用JSON解决同时运动】 json的格式 var json ={name1:key1,name2:key2} 与json对应的循环只能用forin <script> var json = {a:12,b:13}; for(var i in json){ alert(i);//先弹出a再弹出b，也就是说弹出的是name alert(json[i]);//先弹出12再弹出13，也就是说弹出的是key } </script> startMove函数里的attr和iTarget正好就是一对name与key值查看全部
-
【同时运动】 如果写成startMove(oLi,"width",400);startMove(oLi,"height",200); 只有高改变了，因为第二句覆盖了第一句（startMove一上来第一件事就是清除计时器）查看全部
-
【回调函数】 function startMove(obj,attr,iTarget,fn) Li.onmouseover = function(){ startMove(Li,"width",400,funvtion(){ startMove(Li,"height",200,function(){ startMove(Li,"opacity",100); }); }); } 如果onmouseover时候执行1->2->3，那么onmouseout时候应该是3->2->1查看全部
-
【bug浮点数】 鼠标移入时候的透明度不是1而是1.0000098790715（巴拉巴拉一堆数），移开时也不是0.3而是一直在变化的0.29到0.3之间的老长的一个数 原因：使用了parseFloat，计算机并不能很精确地存储浮点数 解决方法：Math.round()四舍五入查看全部
-
【Bug改变透明度】 原因1：透明度如opacity:0.3，而调用getStyle时用的是parseInt(getStyle(obj,attr));变成0了 2：obj.style[attr] = icur + speed + "px";透明度不是加px的 【修改后】 function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = 0; if(attr == "opacity"){ icur = parseFloat(getStyle(obj,attr))*100;//本来最大是1的，但是习惯用最大为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); }else{ if(attr == "opacity"){ obj.style.filter = "alpha(opacity:"+(icur+speed)+")";//针对IE obj.style.opacity = (icur+speed)/100;//针对firefox和chrome }else{ obj.style[attr] = icur + speed + "px"; } } },30) }查看全部
-
【getStyle】如果页面不仅仅有宽和高，而是有好多别的样式，那么前面学的offsetLeft之类的都应该换成getStyle function getStyle(obj,attr){ if(obj.currentStyle){//IE浏览器 return obj.currentStyle[attr]; }else{//firefox浏览器 return getComputedStyle(obj,false)[attr]; } } 使用方法为parseInt(getStyle(oDiv,"width")) 【封装函数】有的需要改变宽，有的需要改变高obj.style.width也可以写成obj.style['width'] function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ 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); }else{ obj.style[attr] = icur + speed + "px"; } },30) } 调用方式如startMove(this,"height",400);查看全部
-
【前面学的offsetLeft之类的都应该改用getStyle】 在上一节的多个物体宽度变化的时候，如果给矩形添加一个外边框 border:4px solid #000 会发现，变宽之后的宽为392px，变回来之后是256px，与预期的400px和200px不符 原因：用oDiv.offsetWidth获取到的是包括边框在内的宽度 【解决方法1】把原来的样式#div1{width:200px;....}中的width去掉， 写在行间<div id="div1" > 所以，使用的时候:oDiv.style.width = oDiv.offsetWidth-1+"px"; 改成oDiv.style.width = parseInt(oDiv.style.width)-1+"px"; 【解决方法2】如果不想写在行内，也可以保留#div1{width:200px;....}采用函数： function getStyle(obj,attr){ if(obj.currentStyle){//IE浏览器 return obj.currentStyle[attr]; }else{//firefox浏览器 return getComputedStyle(obj,false)[attr]; } } 所以oDiv.style.width = parseInt(getStyle(oDiv,"width"))-1+"px"; PS:这个函数除了可以改变宽度之外，还可以改变font-size等查看全部
-
【多个物体的透明度变化】 var oDiv= document.getElementsByTagName("div"); for(var i=0; i<oDiv.length; i++){ aLi[i].onmouseover = function(){ startMove(this,100); } aLi[i].onmouseout = function(){ startMove(this,30); } } var alpha = 30; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(obj.timer); }else{ alpha += speed; obj.style.filter = "alpha(opactiy:"+alpha+")"; obj.style.opactiy = alpha/100; },30) } 【bug】与上次现象相同，鼠标移动足够快的时候回看到多个物体的透明度同时为100% 分析：虽然这里的timer已经分开了，但alpha还是公共的。 【只要是多物体运动，所有的东西都不能公用】 解决方法：跟前面类似，定义oDiv.alpha[i] = 30;然后需要用到alpha的地方换成oDiv.alpha查看全部
-
【多个物体的宽度变化】 var aLi = document.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } } var timer = null; function startMove(obj,iTarget){ clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/8; speed = speed>0 ? Math.ceil(speed) :Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth + speed + "px"; } },30) } 【bug】如果鼠标移动得够快，会出现3个矩形同时变宽。 原因：虽然每次一上来就clearInterval(timer)，但是这个定时器是公用的，所以3个li同时在争着使用定时器 解决方法：给每一个li定义一个timer aLi[i].timer = null; 然后把需要timer的地方全部改成obj.timer查看全部
-
【凡是遇到速度的，都应该考虑是否要向上或向下取整】 function startMove(iTarget){ clearInterval(timer); var speed = (iTarget-oDiv.offsetLeft)/20; if(oDiv.offsetLeft > iTarget){ speed = -10; }else{ speed = 10; } 【bug】最右边是-8.55px而不是0，最左边是-199.5而不是-200 解决方法：向下取整floor或向上取整ceil speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);查看全部
-
【没有直接的属性可以改变透明度，需要定义一个alpha】 var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = "alpha(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它们的这个系数的满值是100，这里需要的满值是1） } },30) }查看全部
-
【透明度变化】 <script> window.onload = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(100); } oDiv.onmouseout = function(){ startMove(30); } </script>查看全部
-
【只用一个参数】 function startMove(iTarget){ clearInterval(timer); var speed = 0; if(oDiv.offsetLeft > iTarget){ speed = -10; }else{ speed = 10; } var oDiv = document.getElementById("div1"); timer = setInterval(function(){ if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+"px"; } },30) }查看全部
-
【封装函数】 function startMove(speed,iTarget){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+"px"; } },30) } oDiv.onmouseover = function(){ startMove(10,0); } oDiv.onmouseout = function(){ startMove(-10,-200); }查看全部
举报
0/150
提交
取消