纯js模拟div层弹性运动的方法


Posted in Javascript onJuly 27, 2015

本文实例讲述了纯js模拟div层弹性运动的方法。分享给大家供大家参考。具体如下:

特性:

1. 支持各项常数自定义
2. 理论支持所有元素,只需修改style.width,你懂得
3. 已知支持浏览器:chrome/firefox/IE7、8、9

<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script type="text/javascript">
var a=900;//最大距离
var b;//定时器变量
var c=-1;//下次点击运动方向 -1负向运动 1正向运动
var d=2; //反弹常量 数值越大弹性越小 取值d>1
var e=-1; //当前运动方向
var f=a; //当前位置
var g=0; //已单向运动时间
var h; //弹性体
var i=15;//运动速度 数值越大,运动越慢
function Bounce(id){
  h=document.getElementById(id);
  //终止未完成的运动
  if(b)clearInterval(b);
  //重置时间
  g=0;
  c=-1*c; //下次点击运动方向改变
  b=setInterval('move()',i);
}
function move(){
  if(c==1){
    if(e==-1){
     if(f-(2*g-1)>0){
       f=f-(2*g-1);
       g++;
     }else{
       e=1;
       f=1;
       g++;
       g=parseInt(g/d);
       g=g%2==0?(g+1):g;
       if(g==3)clearInterval(b);
     }
    }else{
      if(g>0){
        g--;
        f=f+2*g-1;
      }else{
        e=-1;
        g=0;
      }
    }
    h.style.width=f.toString()+"px";
  }else{
    if(e==1){
     if(f+(2*g-1)<a){
       f=f+(2*g-1);
       g++;
     }else{
       e=-1;
       f=a;
       g++;
       g=parseInt(g/d);
       g=g%2==0?(g+1):g;
       if(g==1)clearInterval(b);
     }
    }else{
      if(g>0){
        g--;
        f=f-(2*g-1);
      }else{
        e=1;
        g=0;
      }
    }
    h.style.width=f.toString()+"px";
  }
}
</script>
</head>
<body>
  <div style="color:red;font-size:12px;text-align:center;">
    <div style="text-align:left;color:green;margin:50px 300px;">
      特性:<br> * 支持各项常数自定义 <br> * 理论支持所有元素,只需修改style.width,你懂得<br> * 已知支持浏览器:chrome/firefox/IE7、8、9
    </div>
  </div>
  <input type="button" value="click me" onClick="Bounce('test');" style="text-align:center;border:1px #ccc solid;padding:5px 10px;margin:0px 200px 100px 200px;"/>
  <div style="width:900px;height:200px;margin:0px 200px;background-color:#e8e8e8;border:1px #ccc solid;" id="test" onClick="Bounce('test');"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
微信小程序 教程之引用
Oct 18 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 #Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 #Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 #Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 #Javascript
JavaScript判断IE版本型号
Jul 27 #Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 #Javascript
readonly和disabled属性的区别
Jul 26 #Javascript
You might like
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php 文件缓存函数
2011/10/08 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
python MysqlDb模块安装及其使用详解
2018/02/23 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
django admin 添加自定义链接方式
2020/03/11 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
客服主管岗位职责
2013/12/13 职场文书
留学自荐信写作方法
2014/01/27 职场文书
优秀班组事迹材料
2014/12/24 职场文书
学期个人工作总结
2015/02/13 职场文书
资金申请报告范文
2015/05/14 职场文书
项目验收申请报告
2015/05/15 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
python 详解turtle画爱心代码
2022/02/15 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android