欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件實現(xiàn)彈性運動完整示例

 更新時間：2018年07月07日 16:00:52   作者：菜園子丶  
這篇文章主要介紹了jQuery插件實現(xiàn)彈性運動,結合完整實例形式分析了jQuery插件擴展結合定時器實現(xiàn)頁面元素抖動的相關操作技巧,需要的朋友可以參考下

本文實例講述了jQuery插件實現(xiàn)彈性運動的方法。分享給大家供大家參考，具體如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.dbjr.com.cn 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相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

相關文章

最新評論