脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js运动应用实例

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>

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

您可能感兴趣的文章:

相关文章

  • 前端利器DateUtils日期时间工具深度剖析

    前端利器DateUtils日期时间工具深度剖析

    在日常开发中我们经常需要处理日期和时间的操作,下面这篇文章主要介绍了前端利器DateUtils日期时间工具的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • Webpack处理样式资源的配置详情

    Webpack处理样式资源的配置详情

    Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源,本文就来介绍一下Webpack处理样式资源的配置详情,感兴趣的可以了解一下
    2023-12-12
  • JavaScript与HTML的结合方法详解

    JavaScript与HTML的结合方法详解

    这篇文章主要介绍了JavaScript与HTML的结合方法，利用实例向大家介绍JavaScript与HTML是如何结合的，内容很详细，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 使用Firebug对js进行断点调试的图文方法

    使用Firebug对js进行断点调试的图文方法

    使用Firebug调试JavaScript非常方便。因为js的错误不容易查找，用这个就方便多了。
    2011-04-04
  • JS中欺骗词法作用域的eval和with详解

    JS中欺骗词法作用域的eval和with详解

    词法作用域就是定义在词法阶段的作用域,如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来“修改”（也可以说欺骗）词法作用域呢?JavaScript 中有两种机制来实现这个目的,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • uni-app如何用JS动态修改scss样式变量

    uni-app如何用JS动态修改scss样式变量

    对于uni-app中的组件,可以通过修改它们的样式来自定义它们的外观,下面这篇文章主要给大家介绍了关于uni-app如何用JS动态修改scss样式变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • 微信小程序使用onreachBottom实现页面触底加载及分页效果

    微信小程序使用onreachBottom实现页面触底加载及分页效果

    小程序还没有使用pc端的那种分页格式,下面这篇文章主要给大家介绍了关于微信小程序使用onreachBottom实现页面触底加载及分页效果的相关资料,需要的朋友可以参考下
    2022-10-10
  • JavaScript弹窗基础篇

    JavaScript弹窗基础篇

    这篇文章主要介绍了JavaScript弹窗基础篇的相关资料,需要的朋友可以参考下
    2016-04-04
  • JavaScript异步编程Promise模式的6个特性

    JavaScript异步编程Promise模式的6个特性

    Promise说起来是一个非常简单的概念，即使你没有机会去使用它，很有可能你也了解过它。Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性，希望对大家有帮助
    2014-04-04
  • 利用pixi.js制作简单的跑酷小游戏

    利用pixi.js制作简单的跑酷小游戏

    PixiJS 提供一个适用于所有设备的快速轻量级 2D 库。PixiJS 具有完整的 WebGL 支持，并且可以无缝地回退到 HTML5 的画布。 本文将使用pixi.js制作简单的跑酷小游戏，感兴趣的可以尝试一下
    2022-07-07

最新评论