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;">用來撐出滾動(dòng)條</div>
</body>
</html>
您可能感興趣的文章:
- 淺談jQuery頁面的滾動(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頁面布局拖拽效果代碼
- JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)（2）
相關(guān)文章
jQuery中Chosen三級(jí)聯(lián)動(dòng)功能實(shí)例代碼
Chosen 是一個(gè)JavaScript插件，它能讓丑陋的、很長(zhǎng)的select選擇框變的更好看、更方便,不僅如此，它更擴(kuò)大了，增長(zhǎng)了主動(dòng)篩選的功能。接下來通過本文給大家分享chosen 三級(jí)聯(lián)動(dòng)功能，一起看看吧2017-03-03
jquery實(shí)現(xiàn)圖片無縫滾動(dòng) 蒙版遮蔽效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片無縫滾動(dòng)，蒙版遮蔽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
Jquery遍歷checkbox獲取選中項(xiàng)value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項(xiàng)的value值,需要的朋友可以參考下2014-02-02
jQuery解決下拉框select設(shè)寬度時(shí)IE 6/7/8下option超出顯示不全
jQuery解決IE 6/7/8 BUG：下拉框select設(shè)寬度時(shí)option超出顯示不全，經(jīng)過修改效果還不錯(cuò)，遇到類似情況的朋友可以參考下哈2013-05-05
jQuery移動(dòng)web開發(fā)中的頁面初始化與加載事件
這篇文章主要介紹了jQuery移動(dòng)web開發(fā)中的頁面初始化與加載事件,是JavaScript移動(dòng)端頁面開發(fā)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)購(gòu)物車表單自動(dòng)結(jié)算效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)購(gòu)物車表單自動(dòng)結(jié)算效果,涉及jquery動(dòng)態(tài)獲取頁面元素及實(shí)時(shí)改變頁面元素值的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jquery實(shí)現(xiàn)marquee效果(文字或者圖片的水平垂直滾動(dòng))
原本在前端html代碼中，實(shí)現(xiàn)文字或者圖片的水平垂直滾動(dòng)，都是使用的marquee，但隨著考慮瀏覽器的兼容性和符合為w3c的標(biāo)準(zhǔn)，接下來介紹使用Jquery實(shí)現(xiàn)網(wǎng)頁marquee效果,感興趣的朋友可以了解下哦2013-01-01
JQuery中基礎(chǔ)過濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中基礎(chǔ)過濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章介紹了jQuery的UI組件，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
關(guān)于jquery input textare 事件綁定及用法學(xué)習(xí)
目前1.7以上，jquery的事件綁定已經(jīng)用on替換了原來的bind，接下來為大家介紹下bind的使用方法及input textare事件，感興趣的朋友可以參考下哈2013-04-04