jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
更新時(shí)間：2010年03月23日 00:11:37 作者：
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用</title>
<style type="text/css">
#divShow{width:100px;height:50px;background-color:Green;display:none;}
#divAd{width:100px;height:100px;background-color:Red;position:absolute;top:100px;left:100px;}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//在文本框下方顯示一個(gè)div，類似日歷控件那樣。
function showDiv(obj){
jQuery("#divShow").css("left",jQuery(obj).offset().left);
jQuery("#divShow").css("top",jQuery(obj).offset().top + jQuery(obj).outerHeight());
jQuery("#divShow").show();
}
jQuery(function(){
});
//滾動(dòng)條滾動(dòng)，執(zhí)行下面的函數(shù)，適合做浮動(dòng)廣告
jQuery(this).scroll(function(){
jQuery("#divAd").css("top",100 + jQuery(document).scrollTop());
jQuery("#divAd").css("left",100 + jQuery(document).scrollLeft());
});
</script>
</head>
<body>
<input type="text" value="ok" onclick="showDiv(this);" />
<div id="divShow">2010-03-22</div>
<div id="divAd">浮動(dòng)廣告</div>
<div style="height:2000px;width:2000px;">用來(lái)?yè)纬鰸L動(dòng)條</div>
</body>
</html>
您可能感興趣的文章:
- 淺談jQuery頁(yè)面的滾動(dòng)位置scrollTop、scrollLeft
- 關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測(cè)試
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- js實(shí)現(xiàn)拖拽效果
- 百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 關(guān)于js拖拽上傳 [一個(gè)拖拽上傳修改頭像的流程]
- javascript支持firefox,ie7頁(yè)面布局拖拽效果代碼
- JavaScript限制在客戶區(qū)可見(jiàn)范圍的拖拽(解決scrollLeft和scrollTop的問(wèn)題)（2）
相關(guān)文章
jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示
這篇文章主要介紹了jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示，感興趣的小伙伴們可以參考一下2015-11-11
本文將結(jié)合實(shí)際,使用PHP讀取Mysql數(shù)據(jù)表中的數(shù)據(jù),并將獲取的數(shù)據(jù)按照要求輸出給前端JS,再通過(guò)配置調(diào)用Highcharts圖表庫(kù)生成餅狀圖。2015-05-05
jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果實(shí)例
這篇文章主要介紹了jquery二級(jí)導(dǎo)航下拉菜單，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
jQuery確實(shí)是一個(gè)挺好的輕量級(jí)的JS框架，能幫助我們快速的開(kāi)發(fā)JS應(yīng)用，并在一定程度上改變了我們寫(xiě)JavaScript代碼的習(xí)慣。2011-04-04
今天遇到一個(gè)問(wèn)題需要獲取tagName，使用jquery，查詢了一下，大家說(shuō)用$("dd").attr("tagName")能獲取到，但是得到的返回值是undefined，于是又查詢餓了許久，返回遍歷了一下jquery封裝的對(duì)象2011-11-11
jQuery接受后臺(tái)傳遞的List的實(shí)例詳解
這篇文章主要介紹了jQuery接受后臺(tái)傳遞的List的實(shí)例詳解的相關(guān)資料,這里提供了前臺(tái)代碼和后臺(tái)代碼的實(shí)現(xiàn)，需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細(xì)介紹了jquery簡(jiǎn)單圖片輪播特效，圖片輪播效果特別適合做產(chǎn)品展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09
通過(guò)jQuery源碼學(xué)習(xí)javascript(一)
最近在做日志統(tǒng)計(jì)程序，發(fā)現(xiàn)對(duì)方的程序是在Jquery基礎(chǔ)上進(jìn)行開(kāi)發(fā)的，而公司的網(wǎng)站的框架是prototype。而且我也早就想了解一下Jquery源碼，故決定研究Jquery源碼，模擬它的方法2012-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery內(nèi)容篩選選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
一個(gè)有意思的鼠標(biāo)點(diǎn)擊文字特效jquery代碼
這篇文章主要介紹了一個(gè)有意思的鼠標(biāo)點(diǎn)擊文字特效jquery代碼,需要的朋友可以參考下2017-09-09