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.dbjr.com.cn 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)容感興趣的讀者可查看本站專(zhuān)題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(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拋物線(xiàn)運(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)畫(huà)持續(xù)運(yùn)動(dòng)的實(shí)例
相關(guān)文章
jQuery實(shí)現(xiàn)提交表單時(shí)不提交隱藏div中input的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)提交表單時(shí)不提交隱藏div中input的方法,結(jié)合實(shí)例形式分析了通過(guò)設(shè)置input的disabled屬性實(shí)現(xiàn)隱藏input提交的操作技巧,需要的朋友可以參考下2019-10-10
淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談jQuery before和insertBefore的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
從這一講開(kāi)始，我們將直正接觸一個(gè)JQ類(lèi)庫(kù)，學(xué)習(xí)一下JQ的寫(xiě)法，JQ的一些常用的命令等等，今天主要講的是JQ里的選擇器，這也是JQ的一大特點(diǎn)，這從它的名稱(chēng)jQuery中可以看到，主要功力體現(xiàn)在查詢(xún)上2013-01-01
Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例
本篇文章主要是對(duì)Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效，下面簡(jiǎn)單為大家介紹下jquery $.fn $.fx到底是怎么一回事2013-11-11
這篇文章主要介紹了jquery中獲取元素里某一特定子元素的代碼,需要的朋友可以參考下
2014-12-12 
JQuery WEUI Select 組件增加搜索欄示例demo
這篇文章主要介紹了JQuery WEUI Select 組件增加搜索欄示例demo,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-10-10 
關(guān)于錨點(diǎn)跳轉(zhuǎn)及jQuery下相關(guān)操作與插件
錨點(diǎn)嘛，業(yè)余點(diǎn)的解釋就是可以讓頁(yè)面定位到某個(gè)位置的點(diǎn)。在高度較高的頁(yè)面中經(jīng)常見(jiàn)到
2012-10-10 
Jquery使用原生AJAX方法請(qǐng)求數(shù)據(jù)
本文詳細(xì)講解了Jquery使用AJAX方法請(qǐng)求數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02