jQuery控制div實現(xiàn)隨滾動條滾動效果
更新時間：2016年06月07日 10:10:13 作者：smartsmile2012
這篇文章主要介紹了jQuery控制div實現(xiàn)隨滾動條滾動效果,對比分析了兩種實現(xiàn)方法供大家參考選擇,需要的朋友可以參考下
本文實例講述了jQuery控制div實現(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>
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jquery等待效果示例,需要的朋友可以參考下2014-05-05
jQuery模擬360瀏覽器切屏效果幻燈片(附demo源碼下載)
這篇文章主要介紹了jQuery模擬360瀏覽器切屏效果幻燈片,涉及jQuery響應鼠標事件動態(tài)操作頁面元素樣式的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了基于Jquery代碼實現(xiàn)手風琴菜單，代碼簡單易懂，需要的朋友參考下2015-11-11
這篇文章主要給大家介紹的是jQuery.Callback()的實現(xiàn),這個函數(shù)常見的應用場景是事件觸發(fā)機制，也就是設計模式中的觀察者（發(fā)布、訂閱機制），目前Callbacks對象用于queue、ajax、Deferred對象中，下面通過這篇文章來詳細看看關于jquery.Callbacks實現(xiàn)的介紹吧。2016-11-11
JQuery實現(xiàn)的文字列表一條一條向上滾動的效果2013-11-11
分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件
這篇文章主要介紹了分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件,需要的朋友可以參考下2014-10-10
本篇文章主要對jQuery聯(lián)動日歷的實例進行解析說明。有興趣的朋友可以下載源碼調試運行試試看，希望對大家有所幫助2016-12-12
如果你要使用html元素本身的屬性或方法就需要使用this,如果你要使用jQuery包裝后的方法或屬性就要$(this)2014-05-05
jQuery的promise與deferred對象在異步回調中的作用
這篇文章主要介紹了jQuery的promise與deferred對象在異步回調中的作用,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄胘query獲取自定義的標簽屬性的值簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09