脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 纯js模拟div层弹性运动

纯js模拟div层弹性运动的方法

 更新时间：2015年07月27日 12:55:55   作者：西西爱OS  
这篇文章主要介绍了纯js模拟div层弹性运动的方法,涉及javascript操作div层实现运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了纯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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 对字符串进行HTML编码和解码的JavaScript函数

    对字符串进行HTML编码和解码的JavaScript函数

    对字符串进行HTML编码和解码的JS函数，记下了方便以后找 :)
    2010-02-02
  • 用js小类库获取浏览器的高度和宽度信息

    用js小类库获取浏览器的高度和宽度信息

    在做项目时碰到了要在页面上显示一个浮动DIV层的效果。本来做的是在页面居中时显示的，但后来经过自己的测试发现，当网页中出现了滚动条之后，那个浮动的DIV却还是在页面的顶部显示的
    2012-01-01
  • js限制文本框只能输入中文的方法

    js限制文本框只能输入中文的方法

    这篇文章主要介绍了js限制文本框只能输入中文的方法,涉及javascript正则匹配及鼠标事件的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • 微信小程序template模板与component组件的区别和使用详解

    微信小程序template模板与component组件的区别和使用详解

    这篇文章主要介绍了微信小程序template模板与component组件的区别和使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JS判断元素是否存在数组中的5种方式总结

    JS判断元素是否存在数组中的5种方式总结

    数组是我们编程中经常使用的的数据结构之一,在处理数组时我们经常需要在数组中查找特定的值,下面这篇文章主要给大家总结介绍了关于JS判断元素是否存在数组中的5种方式,需要的朋友可以参考下
    2023-03-03
  • JS简单获得节点元素的方法示例

    JS简单获得节点元素的方法示例

    这篇文章主要介绍了JS简单获得节点元素的方法,结合实例形式分析了javascript获取页面节点元素及修改元素属性相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • 浅谈JS中的!=、== 、!==、===的用法和区别

    浅谈JS中的!=、== 、!==、===的用法和区别

    下面小编就为大家带来一篇浅谈JS中的!=、== 、!==、===的用法和区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript与ActionScript3两者的同性与差异性

    JavaScript与ActionScript3两者的同性与差异性

    接触JavaScript和ActionScript3也有近5年的时间了，它们都是应用比较广泛的脚本语言.接下来通过本文给大家介绍JavaScript与ActionScript3两者的同性与差异性，感兴趣的朋友一起学习吧
    2016-09-09
  • Webpack常见使用配置小结

    Webpack常见使用配置小结

    本文主要介绍了Webpack常见使用配置小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • JS实现控制表格单元格垂直对齐的方法

    JS实现控制表格单元格垂直对齐的方法

    这篇文章主要介绍了JS实现控制表格单元格垂直对齐的方法,涉及javascript操作表单元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论