欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery插件实现弹性运动完整示例

程序员文章站 2023-11-06 17:10:10
本文实例讲述了jquery插件实现弹性运动的方法。分享给大家供大家参考，具体如下： &l...

本文实例讲述了jquery插件实现弹性运动的方法。分享给大家供大家参考，具体如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jquery弹性运动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// javascript document
(function($){
  $.fn.movetx=function(json)
  {
    var i=0;
    for(i=0;i<this.length;i++)//重要
    {
      startmove(this[i],json);
    }
    function getstyle(obj, attr)
    {
      if(obj.currentstyle)
      {
        return obj.currentstyle[attr];
      }
      else
      {
        return getcomputedstyle(obj, false)[attr];
      }
    }
var ispeed=0;
var itget=0;
function startmove(obj,json)
{
  clearinterval(obj.timer);
  obj.timer=setinterval(function (){
    for(var attr=0 in json)
    {
      ispeed+=(json[attr]-parseint(getstyle(obj, attr)))/5;
      ispeed*=0.7;
      itget+=ispeed;
      if(math.abs(ispeed)<1 && math.abs(itget-json[attr])<1)
      {
        clearinterval(obj.timer);
        obj.style[attr]=json[attr]+'px';
      }
      else
      {
        obj.style[attr]=itget+'px';
      }
    }
  }, 30);
}
}})(jquery)
$(function(){
  var odiv=$('#zgz')
  odiv.click(function(){
    $(this).movetx({left:500})
  })
})
</script>
<style>
#zgz{ width:80px; height:80px; background-color:#f00;position:absolute; left:0px; top:20px; color:#fff; padding:10px;}
#xt{ width:1px; height:500px; background-color:#000; position:absolute; left:500px; top:0px;}
</style>
</head>
<body>
<div id="zgz">弹性运动</div>
<div id="xt"></div>
</body>
</html>

运行效果：

jQuery插件实现弹性运动完整示例

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery拖拽特效与技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

上一篇： 笑傲江湖里的莫大为何不结婚

下一篇： Vue.js每天必学之数据双向绑定

推荐阅读