纯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实现的自定义的对话框的实现代码
Mar 21 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 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缓存技术介绍
2006/11/25 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
关于Python 3中print函数的换行详解
2017/08/08 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
什么是python的函数体
2020/06/19 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
个人简历中自我评价
2014/02/11 职场文书
上课看小说检讨书
2014/02/22 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
小石潭记导游词
2015/02/03 职场文书
幼儿园辞职信范文
2015/02/27 职场文书