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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python浪漫表白源码
2019/04/05 Python
python 搜索大文件的实例代码
2019/07/08 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
易程科技软件测试笔试
2013/03/24 面试题
Java程序员面试题
2016/09/27 面试题
生产部主管岗位职责
2014/01/06 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android