jQuery插件實(shí)現(xiàn)彈性運(yùn)動(dòng)完整示例
更新時(shí)間：2018年07月07日 16:00:52 作者：菜園子丶
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)彈性運(yùn)動(dòng),結(jié)合完整實(shí)例形式分析了jQuery插件擴(kuò)展結(jié)合定時(shí)器實(shí)現(xiàn)頁(yè)面元素抖動(dòng)的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery插件實(shí)現(xiàn)彈性運(yùn)動(dòng)的方法。分享給大家供大家參考，具體如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.fzitv.net jQuery彈性運(yùn)動(dòng)</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">彈性運(yùn)動(dòng)</div>
<div id="xt"></div>
</body>
</html>
運(yùn)行效果：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
- jQuery彈性滑動(dòng)導(dǎo)航菜單實(shí)現(xiàn)思路及代碼
- Jquery實(shí)現(xiàn)彈性滑塊滑動(dòng)選擇數(shù)值插件
- jQuery實(shí)現(xiàn)背景彈性滾動(dòng)的導(dǎo)航效果
- 基于jQuery的煙花效果（運(yùn)動(dòng)相關(guān)）點(diǎn)擊屏幕出煙花
- jQuery實(shí)現(xiàn)的分子運(yùn)動(dòng)小球碰撞效果
- jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法
- jQuery拋物線運(yùn)動(dòng)實(shí)現(xiàn)方法(附完整demo源碼下載)
- jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果(附demo源碼下載)
- jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件
- jQuery模擬物體自由落體運(yùn)動(dòng)(附演示與demo源碼下載)
- jquery animate動(dòng)畫持續(xù)運(yùn)動(dòng)的實(shí)例
相關(guān)文章
jquery和雅虎的yql服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)服務(wù)示例
本文介紹一個(gè)利用Jquery和雅虎的YQL服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)功能,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery編寫QQ簡(jiǎn)易聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行，用js做游戲的也越來(lái)越多了，雖然現(xiàn)在html5出來(lái)了，但實(shí)際上要用html5做點(diǎn)啥出來(lái)還是得靠javascript，所以學(xué)好js是非常重要的2011-07-07
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？它們兩個(gè)之間有什么區(qū)別？這些問(wèn)題就出現(xiàn)了。下面這篇文章主要給大家介紹了Jquery中attr與prop區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-05-05
jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)
在介紹如何擴(kuò)展jQuery之前，先大致看下jQuery源碼（以1.3.2版本為例）。2010-05-05
基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁(yè)布局的時(shí)候，我們經(jīng)常會(huì)面臨一個(gè)問(wèn)題，就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中，雖然好幾種方式實(shí)現(xiàn)，但是今天介紹時(shí)我最喜歡的方法，通過(guò)css和jQuery實(shí)現(xiàn)。2011-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)朋友圈查看圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
jQuery+SpringMVC中的復(fù)選框選擇與傳值實(shí)例
下面小編就為大家分享一篇jQuery+SpringMVC中的復(fù)選框選擇與傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章介紹了jQuery 獲取瀏覽器所在的IP地址的小例子，有需要的朋友可以參考一下2013-11-11