本文實例總結了javascript運動效果實現與用法。分享給大家供大家參考，具體如下：
一、圖片放大縮小效果：
<!doctype html><html><head><meta charset="utf-8"><title>圖片放大縮小</title><style>*{ margin:0; padding:0; list-style:none;}#ulList{ margin:50px;}#ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;}</style><script>window.onload = function(){ var oUl = document.getElementById('ulList'); var aLi = oUl.getElementsByTagName('li'); var zIndex = 2; //布局轉換 for(var i=0;i<aLi.length;i++){ aLi[i].style.left = aLi[i].offsetLeft + 'px'; aLi[i].style.top = aLi[i].offsetTop + 'px'; } for(var i=0;i<aLi.length;i++){ aLi[i].style.position = 'absolute'; aLi[i].style.margin = '0'; } for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover = function() { this.style.zIndex = zIndex++; startMove(this, {width:200, height:200, marginLeft:-50, marginTop:-50}); }; aLi[i].onmouseout = function() { startMove(this, {width:100, height:100, marginLeft:0, marginTop:0}); }; }};function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; }}function startMove(obj, json, fn){ clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; for(var attr in json) { var iCur=0; if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCur=parseInt(getStyle(obj, attr)); } var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur!=json[attr]) { bStop=false; } if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } } if(bStop) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30)}</script></head><body><ul id="ulList"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul></body></html>二、信息滑動淡入加載顯示效果：
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style>#msgBox{ width:500px; margin:0 auto; padding:5px;}.msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}.box{ float:left;}</style><script>window.onload = function(){ var oTxt = document.getElementById('txt1'); var oBtn = document.getElementById('btn1'); var oBox = document.getElementById('msgBox'); oBtn.onclick = function() { var oMsg = document.createElement('div'); var aDiv = oBox.getElementsByTagName('div'); oMsg.className = 'msgList'; oMsg.innerHTML = oTxt.value; oTxt.value = ''; if(aDiv.length==0){ oBox.appendChild(oMsg); }else{ oBox.insertBefore(oMsg, aDiv[0]); } var iH = oMsg.offsetHeight; oMsg.style.height = 0; startMove(oMsg, {height:iH}, function(){ startMove(oMsg, {opacity:100}); }); };};function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle; }else{ return getComputedStyle(obj, false)[attr]; }}function startMove(obj, json, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for(var attr in json){ var iCur = 0; if(attr == 'opacity'){ iCur = Math.round((parseFloat(getStyle(obj, attr))*100)); }else{ iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (json[attr] - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur != json[attr]){ bStop = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)+')'; obj.style.opacity = (iCur + iSpeed) / 100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bStop){ clearInterval(obj.timer); if(fn){ fn(); } } }, 30);}</script></head><body><div class="box"> <textarea id="txt1" cols="40" rows="10"></textarea><br /> <input id="btn1" type="button" value="提交信息" /></div><div id="msgBox"></div></body></html>三、無縫滾動效果：
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style>*{ margin:0; padding:0; list-style:none;}#div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}#div1 li{ float:left; padding:10px;}#div1 li img{ display:block;}#div1 ul{ position:absolute;}</style><script>window.onload = function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var aBtn = document.getElementsByTagName('input'); var iSpeed = -3; var timer = null; oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; timer = setInterval(move, 30); aBtn[0].onclick = function() { iSpeed = -3; }; aBtn[1].onclick = function() { iSpeed = 3; }; oDiv.onmouseover = function() { clearInterval(timer); }; oDiv.onmouseout = function() { timer = setInterval(move, 30); }; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left = '0px'; }else if(oUl.offsetLeft>0){ oUl.style.left = -oUl.offsetWidth/2 + 'px'; } oUl.style.left = oUl.offsetLeft + iSpeed + 'px'; }};</script></head><body><input type="button" value="向左" /><input type="button" value="向右" /><div id="div1"> <ul> <li><img src="images/1.jpg" width="100" height="100" /></li> <li><img src="images/2.jpg" width="100" height="100" /></li> <li><img src="images/3.jpg" width="100" height="100" /></li> <li><img src="images/4.jpg" width="100" height="100" /></li> </ul></div></body></html>更多關于JavaScript運動效果相關內容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
