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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
css实现的图片模糊效果...2007-04-04
js数组的用法包括创建、取值赋值、添加以及根据下标(数值或字符)移除元素等等，在本文将为大家详细介绍下，感兴趣的朋友可以参考下2013-10-10
输入自动提示搜索提示功能的使用说明:sugggestion.txt
该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验2013-09-09
本篇文章主要是对动态加载dtree.js树treeview的示例代码进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本篇文章主要介绍了js实现扫雷小程序的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
C#中TrimStart,TrimEnd,Trim在javascript上的实现
今天在后台写了个类,后来才发现,需要在JS上做..于是把代码拷到js上进行修改,代码中用到TrimStart,TrimEnd,Trim等方法,在网上找半天竟然没找到.要么就只能清除空格的!2011-01-01
这篇文章主要介绍了js实现感应鼠标图片透明度变化的方法,涉及javascript鼠标操作及css修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
javascript中SetInterval与setTimeout的定时器用法
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等，本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法2015-08-08
闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分，本文将用通俗的语言带您深入理解Javascript闭包的概念。2011-09-09
JavaScript判断一个字符串是否包含指定子字符串的方法
这篇文章主要介绍了JavaScript判断一个字符串是否包含指定子字符串的方法,实例分析了javascript字符串操作的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
最新评论