纯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 相关文章推荐
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
纯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 正则表达式常用函数
2014/08/17 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
微信API接口大全
2015/04/15 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python交互式图形编程实例(三)
2017/11/17 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python中偏函数用法示例
2018/06/07 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Unix控制后台进程都有哪些进程
2016/09/22 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
数学系个人求职信范文
2014/01/30 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python