主页 / 网络编程 /

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

网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了jQuery插件实现弹性运动,结合完整实例形式分析了jQuery插件扩展结合定时器实现页面元素抖动的相关操作技巧,需要的朋友可以参考下

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.jb51. jQuery弹性运动</title>
<script src="http://libs.baidu./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; :20px; color:#fff; padding:10px;}
#xt{ width:1px; height:500px; background-color:#000; position:absolute; left:500px; :0px;}
</style>
</head>
<body>
<div id="zgz">弹性运动</div>
<div id="xt"></div>
</body>
</html>

运行效果

更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》及《》

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

上一篇：vue.js通过路由实现经典的三栏布局实例代码 下一篇：vue.js使用v-pre与v-html输出HTML操作示例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by