纯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 节点排序 2
Jan 31 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 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中array_merge和array相加的区别分析
2013/06/17 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python中解析json格式文件的方法示例
2017/05/03 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
星空联盟C# .net笔试题
2014/12/05 面试题
大学同学聚会邀请函
2014/01/29 职场文书
年度考核自我鉴定
2014/02/02 职场文书
学校安全管理责任书
2014/07/23 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书