jQuery控制div實(shí)現(xiàn)隨滾動條滾動效果
更新時間：2016年06月07日 10:10:13 作者：smartsmile2012
這篇文章主要介紹了jQuery控制div實(shí)現(xiàn)隨滾動條滾動效果,對比分析了兩種實(shí)現(xiàn)方法供大家參考選擇,需要的朋友可以參考下
本文實(shí)例講述了jQuery控制div實(shí)現(xiàn)隨滾動條滾動效果的方法。分享給大家供大家參考，具體如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery div隨滾動條滾動效果</title>
<script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
var top = $(window).scrollTop() + 200;
var left = $(window).scrollLeft() + 320;
$("#editInfo").animate({ "top": top }, 30); //方式一 效果比較理想
//$("#editInfo").css({ left: left + "px", top: top + "px" }); 方式二 有陰影
});
});
</script>
</head>
<body>
<div id="editInfo" style="float:left;width:300px; height:200px; background-color:#a10000;position:absolute;top:200px;"></div>
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
<br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />
</body>
</html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jquery等待效果示例,需要的朋友可以參考下2014-05-05
jQuery模擬360瀏覽器切屏效果幻燈片(附demo源碼下載)
這篇文章主要介紹了jQuery模擬360瀏覽器切屏效果幻燈片,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
這篇文章主要介紹了基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單，代碼簡單易懂，需要的朋友參考下2015-11-11
jquery.Callbacks的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹的是jQuery.Callback()的實(shí)現(xiàn),這個函數(shù)常見的應(yīng)用場景是事件觸發(fā)機(jī)制，也就是設(shè)計模式中的觀察者（發(fā)布、訂閱機(jī)制），目前Callbacks對象用于queue、ajax、Deferred對象中，下面通過這篇文章來詳細(xì)看看關(guān)于jquery.Callbacks實(shí)現(xiàn)的介紹吧。2016-11-11
JQuery實(shí)現(xiàn)的文字列表一條一條向上滾動的效果2013-11-11
分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件
這篇文章主要介紹了分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件,需要的朋友可以參考下2014-10-10
本篇文章主要對jQuery聯(lián)動日歷的實(shí)例進(jìn)行解析說明。有興趣的朋友可以下載源碼調(diào)試運(yùn)行試試看，希望對大家有所幫助2016-12-12
jQuery的promise與deferred對象在異步回調(diào)中的作用
這篇文章主要介紹了jQuery的promise與deferred對象在異步回調(diào)中的作用,需要的朋友可以參考下
2016-05-05 
用jquery獲取自定義的標(biāo)簽屬性的值簡單實(shí)例
下面小編就為大家?guī)硪黄胘query獲取自定義的標(biāo)簽屬性的值簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09