纯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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
javascript中undefined的本质解析
Jul 31 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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
dedecms模版制作使用方法
2007/04/03 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
python 运算符 供重载参考
2009/06/11 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python自动识别文本编码格式代码
2019/12/26 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
介绍一下UNIX启动过程
2013/11/14 面试题
服务生自我鉴定
2014/01/22 职场文书
销售经理工作职责
2014/02/03 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
高中课程设置方案
2014/05/28 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
新娘婚礼致辞
2015/07/27 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
Go语言入门exec的基本使用
2022/05/20 Golang