javascript运动效果实例总结（放大缩小、滑动淡入、滚动）

本文实例总结了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程序设计有所帮助。