js運(yùn)動(dòng)應(yīng)用實(shí)例解析
更新時(shí)間：2015年12月28日 09:49:50 投稿：lijiao
這篇文章主要針對(duì)js運(yùn)動(dòng)應(yīng)用進(jìn)行實(shí)例解析
本文為大家提供了兩個(gè)js運(yùn)動(dòng)應(yīng)用實(shí)例，分享給大家，具體實(shí)現(xiàn)內(nèi)容如下
應(yīng)用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>
應(yīng)用2，完成如下效果：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
在日常開發(fā)中我們經(jīng)常需要處理日期和時(shí)間的操作,下面這篇文章主要介紹了前端利器DateUtils日期時(shí)間工具的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
Webpack 本身是不能識(shí)別樣式資源的,所以我們需要借助 Loader 來(lái)幫助 Webpack 解析樣式資源,本文就來(lái)介紹一下Webpack處理樣式資源的配置詳情,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了JavaScript與HTML的結(jié)合方法，利用實(shí)例向大家介紹JavaScript與HTML是如何結(jié)合的，內(nèi)容很詳細(xì)，感興趣的小伙伴們可以參考一下2015-11-11
使用Firebug對(duì)js進(jìn)行斷點(diǎn)調(diào)試的圖文方法
使用Firebug調(diào)試JavaScript非常方便。因?yàn)閖s的錯(cuò)誤不容易查找，用這個(gè)就方便多了。2011-04-04
詞法作用域就是定義在詞法階段的作用域,如果詞法作用域完全由寫代碼期間函數(shù)所聲明的位置來(lái)定義,怎樣才能在運(yùn)行時(shí)來(lái)“修改”（也可以說(shuō)欺騙）詞法作用域呢?JavaScript 中有兩種機(jī)制來(lái)實(shí)現(xiàn)這個(gè)目的,感興趣的朋友跟隨小編一起看看吧2023-10-10
uni-app如何用JS動(dòng)態(tài)修改scss樣式變量
對(duì)于uni-app中的組件,可以通過(guò)修改它們的樣式來(lái)自定義它們的外觀,下面這篇文章主要給大家介紹了關(guān)于uni-app如何用JS動(dòng)態(tài)修改scss樣式變量的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
微信小程序使用onreachBottom實(shí)現(xiàn)頁(yè)面觸底加載及分頁(yè)效果
小程序還沒(méi)有使用pc端的那種分頁(yè)格式,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用onreachBottom實(shí)現(xiàn)頁(yè)面觸底加載及分頁(yè)效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JavaScript彈窗基礎(chǔ)篇的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript異步編程Promise模式的6個(gè)特性
Promise說(shuō)起來(lái)是一個(gè)非常簡(jiǎn)單的概念，即使你沒(méi)有機(jī)會(huì)去使用它，很有可能你也了解過(guò)它。Promise是一個(gè)非常有價(jià)值的構(gòu)造器，能夠幫助你避免使用鑲套匿名方法，而使用更具有可讀性的方式組裝異步代碼。這里我們將介紹6個(gè)最簡(jiǎn)單的特性，希望對(duì)大家有幫助2014-04-04
PixiJS 提供一個(gè)適用于所有設(shè)備的快速輕量級(jí) 2D 庫(kù)。PixiJS 具有完整的 WebGL 支持，并且可以無(wú)縫地回退到 HTML5 的畫布。 本文將使用pixi.js制作簡(jiǎn)單的跑酷小游戲，感興趣的可以嘗試一下2022-07-07