js運動應用實例解析

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

這篇文章主要針對js運動應用進行實例解析

本文為大家提供了兩個js運動應用實例，分享給大家，具體實現(xiàn)內(nèi)容如下

應用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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

您可能感興趣的文章:

js
運動

前端利器DateUtils日期時間工具深度剖析
在日常開發(fā)中我們經(jīng)常需要處理日期和時間的操作,下面這篇文章主要介紹了前端利器DateUtils日期時間工具的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-03-03
Webpack處理樣式資源的配置詳情
Webpack 本身是不能識別樣式資源的,所以我們需要借助 Loader 來幫助 Webpack 解析樣式資源,本文就來介紹一下Webpack處理樣式資源的配置詳情,感興趣的可以了解一下
2023-12-12
JavaScript與HTML的結合方法詳解
這篇文章主要介紹了JavaScript與HTML的結合方法，利用實例向大家介紹JavaScript與HTML是如何結合的，內(nèi)容很詳細，感興趣的小伙伴們可以參考一下
2015-11-11
使用Firebug對js進行斷點調(diào)試的圖文方法
使用Firebug調(diào)試JavaScript非常方便。因為js的錯誤不容易查找，用這個就方便多了。
2011-04-04
JS中欺騙詞法作用域的eval和with詳解
詞法作用域就是定義在詞法階段的作用域,如果詞法作用域完全由寫代碼期間函數(shù)所聲明的位置來定義,怎樣才能在運行時來“修改”（也可以說欺騙）詞法作用域呢?JavaScript 中有兩種機制來實現(xiàn)這個目的,感興趣的朋友跟隨小編一起看看吧
2023-10-10
uni-app如何用JS動態(tài)修改scss樣式變量
對于uni-app中的組件,可以通過修改它們的樣式來自定義它們的外觀,下面這篇文章主要給大家介紹了關于uni-app如何用JS動態(tài)修改scss樣式變量的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-07-07
微信小程序使用onreachBottom實現(xiàn)頁面觸底加載及分頁效果
小程序還沒有使用pc端的那種分頁格式,下面這篇文章主要給大家介紹了關于微信小程序使用onreachBottom實現(xiàn)頁面觸底加載及分頁效果的相關資料,需要的朋友可以參考下
2022-10-10
JavaScript彈窗基礎篇
這篇文章主要介紹了JavaScript彈窗基礎篇的相關資料,需要的朋友可以參考下
2016-04-04
JavaScript異步編程Promise模式的6個特性
Promise說起來是一個非常簡單的概念，即使你沒有機會去使用它，很有可能你也了解過它。Promise是一個非常有價值的構造器，能夠幫助你避免使用鑲套匿名方法，而使用更具有可讀性的方式組裝異步代碼。這里我們將介紹6個最簡單的特性，希望對大家有幫助
2014-04-04
利用pixi.js制作簡單的跑酷小游戲
PixiJS 提供一個適用于所有設備的快速輕量級 2D 庫。PixiJS 具有完整的 WebGL 支持，并且可以無縫地回退到 HTML5 的畫布。本文將使用pixi.js制作簡單的跑酷小游戲，感興趣的可以嘗試一下
2022-07-07