纯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 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
采用call方式实现js继承
May 20 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
应届毕业生个人自荐信范文
2013/11/30 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
人事专员的岗位职责
2014/03/01 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
无房证明范本
2014/09/17 职场文书
二审答辩状格式
2015/05/22 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS