快捷導(dǎo)航

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

更新時間：2018年07月07日 16:00:52 作者：菜園子丶

這篇文章主要介紹了jQuery插件實現(xiàn)彈性運動,結(jié)合完整實例形式分析了jQuery插件擴展結(jié)合定時器實現(xiàn)頁面元素抖動的相關(guān)操作技巧,需要的朋友可以參考下

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>m.fzitv.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>

運行效果：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

jquery和雅虎的yql服務(wù)實現(xiàn)天氣預(yù)報服務(wù)示例
本文介紹一個利用Jquery和雅虎的YQL服務(wù)實現(xiàn)天氣預(yù)報功能,需要的朋友可以參考下
2014-02-02
jQuery編寫QQ簡易聊天框
這篇文章主要為大家詳細介紹了jQuery編寫QQ簡易聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行，用js做游戲的也越來越多了，雖然現(xiàn)在html5出來了，但實際上要用html5做點啥出來還是得靠javascript，所以學(xué)好js是非常重要的
2011-07-07
Jquery中attr與prop的區(qū)別詳解
在高版本的jquery引入prop方法后，什么時候該用prop？什么時候用attr？它們兩個之間有什么區(qū)別？這些問題就出現(xiàn)了。下面這篇文章主要給大家介紹了Jquery中attr與prop區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05
jQuery 學(xué)習(xí)第七課擴展jQuery的功能插件開發(fā)
在介紹如何擴展jQuery之前，先大致看下jQuery源碼（以1.3.2版本為例）。
2010-05-05
基于jQuery實現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時候，我們經(jīng)常會面臨一個問題，就是讓一個div實現(xiàn)水平和垂直居中，雖然好幾種方式實現(xiàn)，但是今天介紹時我最喜歡的方法，通過css和jQuery實現(xiàn)。
2011-08-08
jQuery實現(xiàn)朋友圈查看圖片
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)朋友圈查看圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
jQuery+SpringMVC中的復(fù)選框選擇與傳值實例
下面小編就為大家分享一篇jQuery+SpringMVC中的復(fù)選框選擇與傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
jQuery實現(xiàn)的自適應(yīng)焦點圖效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的自適應(yīng)焦點圖效果,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
jQuery 獲取瀏覽器所在的IP地址的小例子
這篇文章介紹了jQuery 獲取瀏覽器所在的IP地址的小例子，有需要的朋友可以參考一下
2013-11-11