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 相关文章推荐
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
JS中常用的消息框总结
2018/02/24 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
小程序实现tab标签页
2020/11/16 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
通过实例了解python property属性
2019/11/01 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
任课老师推荐信范文
2013/11/24 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
遗愿清单观后感
2015/06/09 职场文书
《检阅》教学反思
2016/02/22 职场文书