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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
Vue——前端生成二维码的示例
Dec 19 Vue.js
基于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 设计模式之观察者模式介绍
2012/02/22 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python 如何快速复制序列
2020/09/07 Python
介绍一下.net和Java的特点和区别
2012/09/26 面试题
什么是反射
2012/03/17 面试题
如何进行Linux分区优化
2013/02/12 面试题
大学毕业自我鉴定范文
2014/02/03 职场文书
人事文员岗位职责
2014/02/16 职场文书
培训班主持词
2014/03/28 职场文书
初三开学计划书
2014/04/27 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
教师节老师寄语
2015/05/28 职场文书
个人催款函范文
2015/06/24 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
关于python类SortedList详解
2021/09/04 Python
一行Python命令实现批量加水印
2022/04/07 Python