js运动应用实例解析

更新时间：2015年12月28日 09:49:50 投稿：lijiao

这篇文章主要针对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>

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

您可能感兴趣的文章:

js
运动

javascript操作select元素实例分析
这篇文章主要介绍了javascript操作select元素的方法,可实现针对select元素选中元素时动态改变html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JavaScript函数节流和函数防抖之间的区别
本文主要介绍了JavaScript函数节流和函数防抖之间的区别。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
我们有时会看到有些网站最顶部一直会跟着我们滚动而滚动了，这种方法其实很简单，下面我来给大推荐一个javascript实现div浮动在网页最顶上并带关闭按钮效果
2013-08-08
JS构造函数与原型prototype的区别介绍
下面小编就为大家带来一篇JS构造函数与原型prototype的区别介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
关闭浏览器时提示onbeforeunload事件
这篇文章主要介绍了关闭浏览器时提示onbeforeunload事件，有需要的朋友可以参考一下
2013-12-12
javascript 动态添加事件代码
往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。
2008-11-11
浅谈JavaScript原型链
这篇文章主要为大家详细介绍了JavaScript原型链，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2023-04-04
让IE支持RGBa的背景色的代码
老版本的IE不支持RGBa的背景色，不过我们可以用滤镜实现同样的效果。
2010-07-07
JS获取URL中参数值（QueryString）的4种方法分享
今天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数。后来想了一下，肯定会有更加简单的方法的！所以在网上找到了几个很又简单实用的方法，mark下。
2014-04-04
利用百度地图API获取当前位置信息的实例
下面小编就为大家带来一篇利用百度地图API获取当前位置信息的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望对大家有所帮助
2017-11-11