jquery實現(xiàn)的元素的left增加N像素 鼠標移開會慢慢的移動到原來的位置
更新時間：2010年03月21日 11:48:18 作者：
鼠標移動上去，元素的left增加N像素，鼠標移開會慢慢的移動到原來的位置
此控件是基于Jquery開發(fā)的，要引用Jquery框架
控件代碼
$.fn.myNudge = function() {
var self = $(this);
self.css({ position: "absolute" }); //讓這個元素絕對定位
var selfLeft = self.css("left");
var selfTop = self.css("top");
self.css({ left: selfLeft, top: selfTop }); //設(shè)置這個元素為原來的位置
self.hover(function() {
self.animate({ left: "+=50px" }, 1000);
},
function() {
self.animate({ left: "-=50px" }, 1000);
}
);
}
使用方法
HTML代碼
<span id="Span1" class="s">sadfsadfds</span><br />
JAVASCRIPT代碼
<script type="text/javascript">
$(function() {
$("#Span1").myNudge();
});
</script>
控件代碼
復制代碼 代碼如下:
$.fn.myNudge = function() {
var self = $(this);
self.css({ position: "absolute" }); //讓這個元素絕對定位
var selfLeft = self.css("left");
var selfTop = self.css("top");
self.css({ left: selfLeft, top: selfTop }); //設(shè)置這個元素為原來的位置
self.hover(function() {
self.animate({ left: "+=50px" }, 1000);
},
function() {
self.animate({ left: "-=50px" }, 1000);
}
);
}
使用方法
HTML代碼
復制代碼 代碼如下:
<span id="Span1" class="s">sadfsadfds</span><br />
JAVASCRIPT代碼
<script type="text/javascript">
$(function() {
$("#Span1").myNudge();
});
</script>
相關(guān)文章
JQuery的html(data)方法與<script>腳本塊的解決方法
在使用Jquery的html(data)方法執(zhí)行寫數(shù)據(jù)到Dom元素時遇到一個問題：在data參數(shù)中包含script腳本塊的時候，html(data)方法的執(zhí)行結(jié)果與預期不符2010-03-03
Jquery Easyui驗證組件ValidateBox使用詳解（20）
這篇文章主要為大家詳細介紹了Jquery Easyui自定義下拉框組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jquery實現(xiàn)走馬燈特效實例(撲克牌切換效果）
本文主要介紹了jquery實現(xiàn)走馬燈特效實例(撲克牌切換效果），文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對jQuery中l(wèi)ive與bind方法的區(qū)別進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
對于js跨域訪問，在先前也曾碰到過，但可能并沒有認真去對待，可能查看過相關(guān)資料，但當著兩天再次碰到這個問題時，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強大的記憶力默哀一下。2011-06-06
jQuery不使用插件及swf實現(xiàn)無刷新文件上傳
這篇文章主要介紹了jQuery不使用插件及swf實現(xiàn)無刷新文件上傳,需要的朋友可以參考下2014-12-12
String的Trim()方法失效,在ie8下是有這樣的情況的，解決方法也很簡單使用$.trim(str)即可，需要的朋友可以了解下2013-11-11
關(guān)于jquery append() html時的小問題的解決方法
關(guān)于jquery append() html時的小問題，碰到類似問題的朋友可以參考下。2010-12-12
JQuery Ajax通過Handler訪問外部XML數(shù)據(jù)的代碼
JQuery是一款不錯的Javascript腳本框架，相信園子里的很多朋友對它都不陌生，我們在開發(fā)Web應用程序時難免會使用到Javascript腳本，而使用一款不錯的腳本框架將會大大節(jié)省我們的開發(fā)時間， 并可以毫不費力地實現(xiàn)很多非?？岬男Ч?。2010-06-06
jQuery獲取文本節(jié)點之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個參數(shù)來賦值,那么它們有些什么區(qū)別?2011-03-03