基于jquery的DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的代碼
更新時(shí)間：2012年07月20日 18:56:57 作者：
基于jquery的DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的代碼，有了JQuery簡(jiǎn)單多了，就幾行代碼搞定
核心代碼：
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop()+200;
var left= $(window).scrollLeft()+320;
$("#editInfo").css({ left:left + "px", top: top + "px" });
});
});
</script>
<div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;">
<div>用戶名：<input type="text" /></div>
<div>密碼：<input type="text" /></div>
<div>年齡：<input type="text" /></div>
<div>備注：<input type="text" /></div>
<div><input type="button" value="保存" /></div>
</div>
<div style="height:1500px"></div>
在線演示 http://demo.jb51.net/js/2012/jquery_demo/jquery_div.html
記得以前寫這樣的代碼比較麻煩，現(xiàn)在有了JQuery簡(jiǎn)單多了，就幾行代碼搞定！
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop()+200;
var left= $(window).scrollLeft()+320;
$("#editInfo").css({ left:left + "px", top: top + "px" });
});
});
</script>
<div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;">
<div>用戶名：<input type="text" /></div>
<div>密碼：<input type="text" /></div>
<div>年齡：<input type="text" /></div>
<div>備注：<input type="text" /></div>
<div><input type="button" value="保存" /></div>
</div>
<div style="height:1500px"></div>
在線演示 http://demo.jb51.net/js/2012/jquery_demo/jquery_div.html
記得以前寫這樣的代碼比較麻煩，現(xiàn)在有了JQuery簡(jiǎn)單多了，就幾行代碼搞定！
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的方法集合
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
- jquery easyui滾動(dòng)條部分設(shè)置介紹
- jquery 判斷滾動(dòng)條到達(dá)了底部和頂端的方法
- 基于jquery的橫向滾動(dòng)條（滑動(dòng)條）
- jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼
- asp.net+jquery滾動(dòng)滾動(dòng)條加載數(shù)據(jù)的下拉控件
- JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
- jquery滾動(dòng)條插件slimScroll使用方法
相關(guān)文章
第一次認(rèn)識(shí)jquery延遲對(duì)象，這篇文章主要為大家詳細(xì)解析JQ延遲對(duì)象的相關(guān)概念,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章是對(duì)jquery獲取父窗口元素的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了jQuery遍歷json的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)json格式數(shù)據(jù)的遍歷操作相關(guān)技巧,需要的朋友可以參考下2016-04-04
jQuery對(duì)象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來實(shí)現(xiàn)數(shù)據(jù)緩存，但有兩個(gè)用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])，接下來為大家介紹下他們的區(qū)別，感興趣的朋友可以參考下哈2013-04-04
jQuery通過deferred對(duì)象管理ajax異步
這篇文章主要介紹了jQuery通過deferred對(duì)象管理ajax異步的相關(guān)資料,需要的朋友可以參考下2016-05-05
在很多時(shí)候，我們都不是一步就將所有信息填寫完整，然后提交。而是分步進(jìn)行填寫表單2011-03-03
關(guān)于jquery form表單序列化的注意事項(xiàng)詳解
這篇文章主要給大家介紹了關(guān)于jquery form表單序列化的注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
把其中的參數(shù)默認(rèn)值作為$.fn.color對(duì)象的屬性單獨(dú)進(jìn)行設(shè)計(jì)，然后借助jquery.extend方法，覆蓋原來的參數(shù)選項(xiàng)即可2012-08-08
使用了jq的width()方法時(shí)在ff跟ie下運(yùn)行問題不大，但是到了chrome上，就出現(xiàn)問題2014-05-05
今天在弄?jiǎng)討B(tài)菜單的時(shí)候發(fā)現(xiàn)id里面包含特殊字符"/"，糾結(jié)了N久，就是不能根據(jù)這個(gè)ID獲取到節(jié)點(diǎn)2011-06-06