-
完美运动框架 <script> window.onload=function(){ var Li=document.getElementById('li1'); Li.onmouseover=function(){ startMove(Li,{width:400,height:200,opacity:100}); } Li.onmouseout=function(){ startMove(Li,{width:200,height:100,opacity:30}); } } </script> <script> var json = {name1:key1,name2:key2...nameN:keyN}; for(var i in json){ alert(i);//弹出json里的name alert(json[i]);//弹出json里的key } </script>查看全部
-
js/move.js: function startMove(obj,attr,iTarget,fn){//添加一个回调函数fn clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }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); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
链式运动 <script src="js/move.js"></script> <script> window.onload=function(){ var Li=document.getElementById('li1'); Li.onmouseover=function(){ startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }); }); } Li.onmouseout=function(){ startMove(Li,'opacity',30,function(){ startMove(Li,'height',100,function(){ startMove(Li,'width',200); }); }); } } </script> <body> <ul> <li id="li1"></li> </ul> </body>查看全部
-
alpha+=speed 等价于alpha=alpha+speed查看全部
-
任意属性值（二） 小数在计算机中表示存在误差（alert(0.07*100)）结果不是7，使用Math.round函数来解决； 使用Math.round(parseFloat(getStyle(obj,attr))*100);来获取透明度的当前值，不用parseInt()； 设置透明度要考虑兼容性： 对IE浏览器：filter:alpha(opacity:30); 对其他浏览器：opacity:0.3; obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')'; obj.style.opacity=(当前透明度+变化速度)/100; 透明度不加单位“px”； function starMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=0; //用if判断属性 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); //由于opacity的值是小数，需要用parseFloat转为小数值，Math.round四舍五入 }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/10; 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)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); }查看全部
-
针对IE浏览器，用obj.currentStyle[attr]，对于IE之外的，用getComputedStyle(obj,false)[attr]来获取对象的style值。查看全部
-
多物体运动的时候，需要注意公用的timer的共享性，可以在多个元素对象中各自定义自己的timer属性加以区别查看全部
-
任意属性值（一） 当样式中有边框时，offsetWidth就不等于style.width，设计时不用offsetWidth，使用封装的函数getStyle()，可以有效防止bug出现 <script> window.onload=function(){ var div1=document.getElementById('div1'); var div2=document.getElementById('div2'); div1.onmouseover=function(){startMove(this,'width',400);} div1.onmouseout=function(){startMove(this,'width',200);} div2.onmouseover=function(){startMove(this,'height',400);} div2.onmouseout=function(){startMove(this,'height',100);} } 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(icur==target){ clearInterval(obj.timer); }else{//obj.style.width=obj.style[attr] 注意 style[attr] obj.style[attr]=icur+speed+"px";}},30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr];} } </script> <body> <div id="div1"></div> <div id="div2"></div> </body>查看全部
-
获取样式 obj.stlye.width是样式中的块width，而obj.offsetWidth是整个的width(包括padding、border和width)； 用js的style属性可以获得html标签的样式，但是不能获取非行间样式。为了实现结构样式分离，减少行内元素，可封装函数来获取CSS里定义的style。所以js用currentStyle和getComputedStyle获取css的非行间样式； offsetWidth返回的是padding+border+width值之和； dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px，但是没有出现在 引号中的样式是获取不到的。 <style type="text/css"> *{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:#08b; border:1px solid pink; } </style> <script type="text/javascript"> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var odiv=document.getElementById("div1"); odiv.style.width=parseInt(getStyle(odiv,'width'))-1+'px'; },30); } //获取样式函数getStyle()，currentStyle针对IE浏览器，getComputedStyle针对firefox浏览器 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script> <body> <div id="div1" ></div> </body>查看全部
-
多物体运动-透明度 <style type="text/css"> * { margin:0 ; padding:0; } div{ width:200px; height:200px; background:#08b; filter:alpha(opacity:30); opacity:0.3; margin:10px; float:left; } </style> <script> window.onload=function(){ var adiv=document.getElementsByTagName("div"); for(var i=0;i<adiv.length;i++){ adiv[i].alpha=30; adiv[i].onmouseover=function(){ startMove(this,100); } adiv[i].onmouseout=function(){ startMove(this,30); } } } function startMove(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>target){ speed=-10; }else{ 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) } </script> <body> <div ></div> <div ></div> <div ></div> </body> 经验之谈：“只要是多物体运动，所有的东西都不能共用。” 应该为每一个物体都各自定义一个参数值，例如timer可用a[i].timer。查看全部
-
多物体运动 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></script> <style type="text/css"> * { margin:0 ; padding:0; } ul,li{ list-style:none; } ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; } </style> <script> window.onload=function(){ var ali=document.getElementsByTagName("li"); for(var i=0;i<ali.length;i++){ ali[i].timer=null; ali[i].onmouseover=function(){ startMove(this,400); } ali[i].onmouseout=function(){ startMove(this,200); } } } function startMove(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(obj.offsetWidth==target){ clearInterval(obj.timer) }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body>查看全部
-
缓冲运动 <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(itarget){ var odiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=(itarget-odiv.offsetLeft)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(odiv.offsetLeft==itarget){ clearInterval(timer) }else{ odiv.style.left=odiv.offsetLeft+speed+"px" } },30) } </script> 原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。 可以用console.log(speed)验证，speed的log会一直输出，因为程序死循环了。 此时需要ceil or floor来解决这个问题，让程序进入if的判断，终止循环。 由于运算出现浮点数，而px无法显示小数值，所以需要对速度进行取整判断。 速度的定义： var speed=(目标值-当前值（offset）)/20； 遇到速度变化的运动时，一定要判断上下取整的问题： speed=speed>0?Math.ceil(speed):Math.floor(speed)。查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){//针对IE浏览器 return obj.currentStyle[attr]; } else{//针对Firefox浏览器 return getComputedStyle(obj,false)[attr]; } }查看全部
-
在多物體運動中, 我們可以先分為兩種, 一種是「多物體的長度/位置運動」, 另一種是「多物體的透明度運動」 首先先討論, 「多物體的長度/位置運動」： - 概念延續「緩衝運動」, 大部分的觀念都相同, 但是由於是「多物體」運動, 我們會需要去判斷說現在我們要控制的是哪一個物件, 所以在startMove()函數當中, 加入了一個新的「obj」參數. 用來判斷當下控制的是哪一個物件 —> startMove(obj, target) [startMove(this, 400);] - 不過, 這還沒結束. 會發現當滑鼠移動很快的時候, 有寫物件就不會回到原本的位置. 那是因為定時器共用的關係. 快速地去觸發物件, 啟用定時器. 會導致各個物件都搶著用, 但是值不同, 所以就會產生這樣的錯誤. - 解決方式當然就是給他們每個物件自己一個定時器囉！ PS: 多物體運動都核心重點就是不可以共用東西！ 再來是討論, 「多物體的透明度運動」： - 概念延續「透明度運動」, 大部分的觀念都相同, 也接著剛剛的「多物體的長度/位置運動」的觀念, 加入了一個新的「obj」參數. 用來判斷當下控制的是哪一個物件 —> startMove(obj, target) [startMove(this, 400);] - 不過, 這還沒結束. 會發現當滑鼠移動很快的時候, 有寫物件就不會回到原本的位置. 那是因為定時器共用的關係. 快速地去觸發物件, 啟用定時器. 會導致各個物件都搶著用, 但是值不同, 所以就會產生這樣的錯誤. - 解決方式當然就是給他們每個物件自己一個定時器囉！ - 一樣, 多物體運動的核心重點！不可以共用東西！所以alpha也要變成是自己用自己的 PS: 多物體運動都核心重點就是不可以共用東西！查看全部
-
行間樣式： 1.過程：obj.stlye.width是樣式中的塊width；而obj.offsetWidth是顯示的width(包括border之類的)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,當borderWidth＞1時,其實這是在加寬度而不是減寬度; 2.原型為parseInt ( Strings,[int radix])，用於解析一個字符串，並返回一個整數。還有parseFloat,則解析一個字符串，返回一個浮點數; 3.用js的style屬性可以獲得html標籤的樣式，但是不能獲取非行間樣式。即： 用document.getElementById(‘element').style.xxx可以獲取元素的樣式信息，可是它獲取的只是DOM元素style屬性里的樣式規則，為了實現結構樣式分離，減少行內元素，可封裝函數來獲取CSS里定義的style。對於通過class屬性引用的外部樣式表，就拿不到我們要的信息了。所以js用currentStyle和getComputedStyle獲取css的非行間樣式； 4.offsetWidth返回的是oDiv的padding+border+width值之和； 獲取樣式方法： 1、dom.style.xxx 這種寫法只能獲取行內樣式 例如 <div ></div> div.style.width能獲取到是200px，但是沒有出現在 引號中的樣式是獲取不到的 2、萬能方法(為了獲取樣式而封裝好的函數) getComputedStyle(obj,false)[attr] 這個是標準方法，需要做一下兼容 currentStyle 是IE的 3、友情贈送獲取任何樣式的代碼 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }查看全部
举报
0/150
提交
取消