-
樣式： <style> * { margin: 0; padding: 0; } #move { padding: 10px; width: 300px; background: #f4f4f4; margin : 10px auto; border: 1px solid #ccc; margin: 10px auto; } #move a { display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; text-align: center; margin: 10px 17px; position: relative; padding-top: 40px; color: #9c9c9c; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; } #move a i { position: absolute; top: 20px; left: 0; display: inline-block; width: 100%; text-align: center; filter: alpha(opacity = 100); opacity: 1; } #move a:hover { color: #F00; } #move img { border: none; } </style>查看全部
-
這里有兩個BUG：第一個肯定是不能執(zhí)行回調涵數(shù)。只要把flag=true放到定時器下面。 第二個就是當鼠標移動的時候會出現(xiàn)多次執(zhí)行涵數(shù)，只要鼠標小小的動一下就會執(zhí)行動畫。只要把onmouseover 改成onmouseenter就可以了。這樣兩個BUG就都解決了 <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('move'); var aList=oDiv.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:100}) }); } } } </script>查看全部
-
// 設置timer var moveFlag = null; /** * 定義移動函數(shù) * moveTarget 移動的目標位置 * moveObject 需要移動的對象 */ function startMove(moveObject, moveTarget) { clearInterval(moveFlag); moveFlag = setInterval(function() { //移動速度等于目標減去實時的位移，放慢15倍 var speed = (moveTarget - moveObject.offsetLeft) / 15; //從負數(shù)到0向上取整，從0到負數(shù)向下取整 speed = moveTarget == 0 ? Math.ceil(speed) : Math.floor(speed); //移動操作 if (moveObject.offsetLeft !== moveTarget) { moveObject.style.left = moveObject.offsetLeft + speed + "px"; } else { clearInterval(moveFlag); } }, 10); }查看全部
-
<!-- 使用js實現(xiàn)透明度運動而不采用直接設置css的style.opacity屬性來改變透明度,這是因為css的透明度的設置是一步到位，瞬時完成的，而使用js可以實現(xiàn)漸隱特效 --> opacity是不透明度，opacity為0時表示不透明度是0也就是完全透明(效果等同于css的隱藏) filter: alpha(opacity:30); /*IE瀏覽器專用，opacity屬性值為0~100*/ opacity:0.3; /*所有主流瀏覽器都支持opacity屬性。. 注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity屬性值是0~1*/ 【沒有直接的屬性可以改變透明度，需要定義一個alpha】查看全部
-
<script type="text/javascript"> window.onload=function(){ var oLi=document.getElementById('li1'); oLi.onmousemove=function(){ startMove(this,{width:400,height:200},function(){ startMove(this,{opacity:100}); }); } oLi.onmouseout=function(){ startMove(this,{opacity:30},function(){ startMove(this,{width:200,height:100,opacity:30}); }); } } </script>查看全部
-
<script src="move.js"> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { var flag; clearInterval(obj.timer); obj.timer = setInterval(function() { flag = true; for ( var attr in json) { // 1.取當前值 var icur = 0; if (attr == 'opacity') { icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { icur = parseInt(getStyle(obj, attr)); } // 2.算速度 var speed = (json[attr] - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 3.檢測停止 if (json[attr] != icur) { flag = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')'; obj.style.opacity = (icur + speed) / 100; } else { obj.style[attr] = icur + speed + "px"; } } if (flag) { clearInterval(obj.timer); if (fn) { fn.call(obj); } } }, 30) } </script>查看全部
-
var json={name1：value1，name2：value2}； for(var i in json){//循環(huán)遍歷取出 i;//取出name json[i];//取出value } 多屬性同時運動時，應用flag表示所有屬性皆已到達目標值，然后再結束運動。 function startMove(ele, data, fn){ timer = setInterval(function(){ var flag = true; for(var attr in data){ var val, speed; ...... if(val != data[attr]) flag = false; } if(flag){ clearInterval(timer); if(fn) fn(); }, 30); }查看全部
-
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>多物體運動</title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } li{ width: 200px; height: 100px; background: red; } </style> </head> <body> <ul> <li id="jj"></li> </ul> <script> window.onload = function(){ var Jungle = document.getElementById('jj'); Jungle.onmouseover = function(){ startmove(400); } Jungle.onmouseout = function(){ startmove(200); } } var timer = null; function startmove(zTarget){ clearInterval(timer); var Jungle.getElementById('jj'); timer = setInterval(function(){ var speed = (zTarget - Jungle.offsetWidth)/10; speed = speed > 0?Math.ceil(speed):Math.floor(speed); if(zTarget == Jungle.offsetWidth){ clearInterval(timer); }else{ Jungle.style.width = Jungle.offsetWidth + speed + 'px'; } },30) } </script> </body> </html> 不知道哪里出錯了查看全部
-
parseFloat() 解析一個字符串并返回一個浮點數(shù)。 parseInt() 解析一個字符串并返回一個整數(shù)。 var iNum1 = parseInt("12345red"); //返回 12345查看全部
-
多物體運動所有的東西不能共用查看全部
-
運動框架實現(xiàn)思路： 1.速度（改變值Left、right、width、height、opacity） 2.緩沖運動 3.多物體運動 4.任意值變化 5.鏈式運動 （如：先寬后高） 6.同時運動 （如：寬高同時運動）查看全部
-
動畫效果叫做運動！~查看全部
-
parseFloat() 解析一個字符串并返回一個浮點數(shù)。 parseInt() 解析一個字符串并返回一個整數(shù)。 var iNum1 = parseInt("12345red"); //返回 12345 var iNum1 = parseInt("0xA"); //返回 10 var iNum1 = parseInt("56.9"); //返回 56 var iNum1 = parseInt("red"); //返回 NaN var fNum1 = parseFloat("12345red"); //返回 12345 var fNum2 = parseFloat("0xA"); //返回 NaN var fNum3 = parseFloat("11.2"); //返回 11.2 var fNum4 = parseFloat("11.22.33"); //返回 11.22 var fNum5 = parseFloat("0102"); //返回 102 var fNum1 = parseFloat("red"); //返回 NaN查看全部
-
多物體運動所有的東西都不能共用查看全部
-
緩沖運動中：向上取整Math.ceil(),向下取整Math.floor() 由于數(shù)值設置的原因，div移動到一定px后，進行相減再除20的運算后會出現(xiàn)小數(shù)，比如0.75，比如這時div移動到了290，程序里寫到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,此時speed速度為0.75。而瀏覽器是不允許出現(xiàn)小數(shù)的，會把0.75去掉，那么就速度為0 不動了。那么div的left就變成了290，下次執(zhí)行時div的left是290，算出來速度還是0.75，瀏覽器又省略了小數(shù)，結果就是div停在了290px，到不了目標點300。 所以 向右移動 速度為正 就將變成小數(shù)的速度 向上取整 為1 向左移動 速度為負 就將變成負小數(shù)的速度向下取整 取整原因：因為有除法，當offsetLeft值變的越來越小時，最后相除會使speed變成小數(shù)，從而offsetLeft與speed相加會有小數(shù)，又因顯示器的最小像素單位是1px，所以瀏覽器默認向下取整（變小，即floor），將小數(shù)省略，小數(shù)省略后，最終的值會變小，從而導致程序無法進入if判斷，進入死循環(huán)。 這一點可以用console.log(speed)可以驗證，speed的log會一直輸出，因為程序死循環(huán)了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目標值-當前值)/10 不能整除的話。運動到最后，是1~9之間的數(shù)字來除以10，結果是個小于1的小數(shù)，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味著不再發(fā)生變化。也就是說，當速度大于0的時候，如果用Math.floor(speed),最后不到10個像素的時候，就不會動了。所以要用Math.ceil向上取整。同理，當速度<0時，要用Math.ceil()取整。查看全部
舉報
0/150
提交
取消