js运动应用实例解析


Posted in Javascript onDecember 28, 2015

本文为大家提供了两个js运动应用实例,分享给大家,具体实现内容如下

应用1,完成如下效果:

js运动应用实例解析

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,完成如下效果:

js运动应用实例解析

代码如下:

<!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>

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

Javascript 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
JavaScript中Function详解
Feb 27 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
vue实现购物车列表
Jun 30 Javascript
js实现筛选功能
Nov 24 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 #Javascript
浅析JS运动
Dec 28 #Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 #Javascript
js时间戳转为日期格式的方法
Dec 28 #Javascript
jquery实现全屏滚动
Dec 28 #Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 #Javascript
延时加载JavaScript代码提高速度
Dec 27 #Javascript
You might like
PHP 输出简单动态WAP页面
2009/06/09 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python for循环与range函数的使用详解
2019/03/23 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python Tensor和Array对比分析
2020/01/08 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
应届毕业生个人求职自荐信
2014/01/06 职场文书
自主招生自荐信指南
2014/02/04 职场文书
2014年教师节寄语
2014/08/11 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
详解SQL报错盲注
2022/07/23 SQL Server