纯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 相关文章推荐
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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 urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python 运算符 供重载参考
2009/06/11 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python实现梯度下降算法
2020/03/24 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
关于Python作用域自学总结
2019/06/10 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python表达式的优先级详解
2020/02/18 Python
windows支持哪个版本的python
2020/07/03 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
银行介绍信范文
2014/01/10 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
大学生实习感言
2014/01/16 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
Redis 常见使用场景
2021/08/30 Redis