用jquery來(lái)定位
demo:http://www.healdream.com/upLoad/html/jquery/position/
用法:
首先當(dāng)然是將兩個(gè)js包含進(jìn)來(lái)了
<script type="text/javascript" src="../jquery.js"></script>
<!-- load dimensions.js (this is what we’re testing! -->
<script type="text/javascript" src="dimensions.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {//這個(gè)是$(document).ready()的簡(jiǎn)寫
$(’#userAgent’).html(navigator.userAgent);//.html(str)方法是將當(dāng)前dom用str替代
//navigator.userAgent這句是用來(lái)得到客戶端的瀏覽器類型的
$(’a’).click(function(event) {//對(duì)鏈接的點(diǎn)擊事件定義函數(shù)
var href = this.href;//得到當(dāng)前的鏈接字符串
var id = href.substr(href.indexOf(’#’));//得到#后面的字符串
var options = {//定義各個(gè)參數(shù),主要是待會(huì)move時(shí)用到
margin: parseInt( $(’#margin’).val() ),//.val()方法是得到當(dāng)前對(duì)象的value值
border: parseInt( $(’#border’).val() ),//parseInt方法就是轉(zhuǎn)換為int型,也就是整形
padding: parseInt( $(’#padding’).val() ),
scroll: parseInt( $(’#scroll’).val() )
};
var offset = {};
//offset方法是在dimensions.js里定義的
$(id).offset(options, offset);
$(’#moveable’).css(offset);//設(shè)置id為moveable的dom的css為offset
return false;
});
});
</script>
主要的代碼就這些了,是不是很簡(jiǎn)單啊
相關(guān)文章
jQuery 實(shí)現(xiàn)評(píng)論等級(jí)好評(píng)差評(píng)特效
本文主要介紹如何實(shí)現(xiàn)類似淘寶好評(píng)差評(píng)的效果,需要的小伙伴直接拿去用吧。2016-05-05jQuery遍歷節(jié)點(diǎn)樹(shù)方法分析
這篇文章主要介紹了jQuery遍歷節(jié)點(diǎn)樹(shù)方法,結(jié)合實(shí)例形式分析了3種常見(jiàn)的節(jié)點(diǎn)遍歷技巧,需要的朋友可以參考下2016-09-09jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法
這篇文章主要給大家介紹了關(guān)于JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法,通過(guò)本文的介紹你可以換掉千篇一律的默認(rèn)滾動(dòng)條,讓你的網(wǎng)站或web項(xiàng)目更具特色,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局【推薦】
本文主要介紹了jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局的實(shí)例,代碼簡(jiǎn)單,容易修改。下面跟著小編一起來(lái)看下吧2017-03-03利用jquery實(shí)現(xiàn)下拉框的禁用與啟用
本文主要介紹了jquery實(shí)現(xiàn)下拉框的禁用與啟用的具體代碼。代碼清晰,容易理解。有需要的朋友可以參考下,希望會(huì)對(duì)大家有所幫助2016-12-12基于jQuery實(shí)現(xiàn)淡入淡出效果輪播圖
這篇文章主要為大家詳細(xì)介紹了基于jQuery淡入淡出效果輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
本文將會(huì)使用jquery實(shí)現(xiàn)以下功能:按下方向鍵時(shí),使層向相應(yīng)的方向平滑移動(dòng)20像素;四個(gè)方向鍵的鍵碼分別是37(左)、38(上)、39(右)和40(下),感興趣的朋友可以了解下2013-01-01