js運動應用實例解析_javascript技巧
- WBOY原創
- 2016-05-16 15:23:061318瀏覽
本文為大家提供了兩個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>
以上就是本文的全部內容，希望對大家的學習有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn