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

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

程序员文章站 2022-06-12 09:29:44
本文实例讲述了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程序设计有所帮助。

上一篇： 太田资正是谁？太田资正有着怎样的事迹

下一篇： 亨利克·显克维支有着怎样的创作特点？关于他的评价是怎样的

推荐阅读