-
上面的那個(gè)問題，解決方法。第一個(gè)，設(shè)置行內(nèi)樣式。查看全部
-
最初沒有border，style.width=offsetWidth - 1 + 'px'； 加了border值后，offsetWidth每次算的時(shí)候就會(huì)加上border，所以，如果border大于1， 那么style.width不但不會(huì)減小，還會(huì)增加。查看全部
-
//獲取樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(0bj,false)[attr];s } }查看全部
-
6-2：完美運(yùn)動(dòng)框架 JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式 var json={name:key}多對(duì)值可以用逗號(hào)隔開 var json={a:12,b:2} 遍歷json,用 for-in循環(huán) for(var i in json) {alert(i);//彈出對(duì)象 alert(json[i]);//彈出對(duì)象的值} 使用案例： window.onload=function(){ var Li=document.getElementById('li1'); Li.onmouseover=function(){ startMove(Li,{width:400,height:101,opacity:100}) }} function startMove(obj,json,fn){ var flag=true;標(biāo)志是否全部運(yùn)動(dòng)到達(dá)目標(biāo)值 clearInterval(obj.timer); obj.timer=setInterval(function(){ 遍歷JSON for( var attr in json){ var curr=0; if(attr=='opacity'){ //Math.round四舍五入 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); 判斷是否所有的運(yùn)動(dòng)都達(dá)到目標(biāo)值 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){ clearInterval(obj.timer); if(fn){ fn();} } },30)}查看全部
-
5-1：鏈?zhǔn)竭\(yùn)動(dòng) 鏈?zhǔn)竭\(yùn)動(dòng)的環(huán)環(huán)緊扣 <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>查看全部
-
Math.round()將一個(gè)數(shù)四舍五入為一個(gè)最接近的整數(shù) 改變透明度時(shí)出現(xiàn)的問題： 1、獲取當(dāng)前透明度不用parseInt，parseInt是整形，透明度以小數(shù)為主，可以用parseFloat(). 2、設(shè)置透明度要考慮兼容 obj.style.filter='alpha(opacity:'+(當(dāng)前透明度+變化速度)+')'; obj.style.opacity=(當(dāng)前透明度+變化速度)/100;查看全部
-
4-3任意屬性值： 功能完全相同的代碼，可以將不同的東西當(dāng)做參數(shù)傳進(jìn)去。 obj.style.width=curr+speed+'px'; // 這樣寫，有利于整理代碼，可以將其作為參數(shù)傳入，下面一條將其作為參數(shù)attr // 傳進(jìn)來，就可以實(shí)現(xiàn)不同樣式的運(yùn)動(dòng) // obj.style['height']=curr+speed+'px'; obj.style[attr]=curr+speed+'px';查看全部
-
4-2獲取樣式： <script> window.onload=function(){ startMove(); }; function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); // offsetWidth獲取的是它整個(gè)的寬度：包括內(nèi)容寬度和邊框等等 // oDiv.style.width=oDiv.offsetWidth-1+'px'; // 當(dāng)把樣式寫在行內(nèi)時(shí)，可以通過如下方法獲取 // oDiv.style.width=parseInt(oDiv.style.width)-1+'px'; // 當(dāng)不把樣式寫在行內(nèi)是，可以通過getStyle函數(shù)獲取 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; oDiv.style.fontSize=parseInt(getStyle(oDiv,'font-size'))-1+'px'; },30) } // getStyle函數(shù)是一個(gè)封裝好的用來獲取樣式的函數(shù) function getStyle(obj,attr){ // currentStyle:針對(duì)IE瀏覽器 if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ // getComputedStyle:針對(duì)Firefox瀏覽器 return getComputedStyle(obj,false)[attr]; } } <!--<div id="div1" >--> <div id="div1">干酪 </div>查看全部
-
4-1多物體動(dòng)畫： // var timer=null; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; speed=(iTarget-obj.offsetWidth)/10; speed=speed>0? Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget){ clearInterval(obj.timer); } else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } // var alpha=30; function startMove1(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-10;} else{speed=10;} if(obj.alpha==iTarget) { clearInterval(obj.timer); } else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30) } </script>查看全部
-
4-1多物體動(dòng)畫： 存在多項(xiàng)共用一個(gè)值，并且這個(gè)值會(huì)發(fā)生改變時(shí)，最好單獨(dú)給賦值，避免出現(xiàn)爭用的情況。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 給每一個(gè)li設(shè)置一個(gè)timer，才不會(huì)致使他們?nèi)宼imer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };查看全部
-
3-1：緩沖動(dòng)畫 alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整 遇到這種運(yùn)動(dòng)涉及到數(shù)字的問題都要做一個(gè)判斷，向上或者向下取整 </style> <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; // 從用兩個(gè)函數(shù)實(shí)現(xiàn)，到用一個(gè)函數(shù)：兩個(gè)有很多相同的部分，則相同部分可以共用，不同部分看有什么聯(lián)系 // 從傳入兩個(gè)參數(shù)到一個(gè)參數(shù)：參數(shù)傳遞盡可能的少 function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); 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 {查看全部
-
2-2 ：透明動(dòng)畫 所有主流瀏覽器(IE,Firefox,Opera,Chrome,Safari)都支持opacity屬性。 注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=50) window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(100); }; oDiv.onmouseout=function(){ startMove(30); } }; 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(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; } },30) }查看全部
-
JS動(dòng)畫效果： 2-1：速度動(dòng)畫： 為防止動(dòng)畫累加，在每次觸發(fā)動(dòng)畫事件時(shí)，應(yīng)該先清除前一個(gè)沒有完成的動(dòng)畫，即清除錢一池開啟的定時(shí)器，然后這次再開啟一個(gè)定時(shí)器。 offsetLeft值可以獲取當(dāng)前的left值， 而offsetLeft屬性不能被賦值，只能獲取 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }查看全部
-
用此方法不用將樣式都寫到html里查看全部
-
JS動(dòng)畫效果： 運(yùn)動(dòng)框架實(shí)現(xiàn)思路： 1.速度（改變值left,right,width,height,opacity) 2.緩沖運(yùn)動(dòng) 3.多物體運(yùn)動(dòng) 4.任意值變化 5.鏈?zhǔn)竭\(yùn)動(dòng) 6.同時(shí)運(yùn)動(dòng)查看全部
舉報(bào)
0/150
提交
取消