js运动应用实例解析

本文为大家提供了两个js运动应用实例，分享给大家，具体实现内容如下
应用1，完成如下效果：

js代码如下：

<script src="move.js"></script><script>window.onload=function （）{var oDiv=document.getElementById（"play"）;var aBtn=oDiv.getElementsByTagName（"ol"）[0].getElementsByTagName（"li"）;var oUl=oDiv.getElementsByTagName（"ul"）[0];var now=0;for（var i=0;i<aBtn.length;i++）{aBtn[i].index=i;aBtn[i].onclick=function （）{now=this.index;tab（）;};}function tab（）{for（var i=0;i<aBtn.length;i++）{aBtn[i].className="";}aBtn[now].className="active";startMove（oUl, {top: -150*now}）;}function next（）{now++;if（now==aBtn.length）{now=0;}tab（）;}var timer=setInterval（next, 2000）;oDiv.onmouseover=function （）{clearInterval（timer）;};oDiv.onmouseout=function （）{timer=setInterval（next, 2000）;};};</script>

应用2，完成如下效果：

代码如下：

<！DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.....</style><script type="text/javascript" src="move.js"></script><script type="text/javascript">window.onload=function （）{var oBtn=document.getElementById（"but"）;var oBottom=document.getElementById（"zns_bottom"）;var oBox=document.getElementById（"zns_box"）;var oBtnClose=document.getElementById（"btn_close"）;oBox.style.display="block";var initBottomRight=parseInt（getStyle（oBottom, "right"））;var initBoxBottom=parseInt（getStyle（oBox, "bottom"））;oBox.style.display="none";oBtn.onclick=openHandler;oBtnClose.onclick=closeHandler;function openHandler（）{startMove（oBottom, {right: 0}, function （）{oBox.style.display="block";startMove（oBox, {bottom: 0}）;}）;oBtn.className="but_hide";oBtn.onclick=closeHandler;}function closeHandler（）{startMove（oBox, {bottom: initBoxBottom}, function （）{oBox.style.display="none";startMove（oBottom, {right: initBottomRight}, function （）{oBtn.className="but_show";}）;}）;oBtn.onclick=openHandler;}};</script></head><body>......</body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助。