jQuery控制div實(shí)現(xiàn)隨滾動(dòng)條滾動(dòng)效果
本文實(shí)例講述了jQuery控制div實(shí)現(xiàn)隨滾動(dòng)條滾動(dòng)效果的方法。分享給大家供大家參考,具體如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div隨滾動(dòng)條滾動(dòng)效果</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動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 一個(gè)用jquery寫的判斷div滾動(dòng)條到底部的方法【推薦】
- 通過JQuery將DIV的滾動(dòng)條滾動(dòng)到指定的位置方便自動(dòng)定位
- jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
- jquery簡(jiǎn)單實(shí)現(xiàn)滾動(dòng)條下拉DIV固定在頭部不動(dòng)
- 利用div+jquery自定義滾動(dòng)條樣式的2種方法
- JQuery+DIV自定義滾動(dòng)條樣式的具體實(shí)現(xiàn)
- jquery DIV撐大讓滾動(dòng)條滾到最底部代碼
- 基于jquery的滾動(dòng)條滾動(dòng)固定div(附演示下載)
- 基于jquery的DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的代碼
- jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
相關(guān)文章
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
jQuery實(shí)現(xiàn)圖片放大原理很簡(jiǎn)單,就是將圖片顯示的尺寸變大后放在瀏覽器的一個(gè)指定位置,從而實(shí)現(xiàn)圖片的放大預(yù)覽,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-09-09jQuery jqgrid 對(duì)含特殊字符json 數(shù)據(jù)的 Java 處理方法
在網(wǎng)頁上使用 json 數(shù)據(jù),如果數(shù)據(jù)中含有特殊字符,會(huì)比較麻煩。2011-01-01jQuery應(yīng)用之jQuery鏈用法實(shí)例
這篇文章主要介紹了jQuery應(yīng)用之jQuery鏈用法,實(shí)例形式分析了jQuery鏈的原理及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法,實(shí)例分析了jQuery操作div塊拖動(dòng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery實(shí)現(xiàn)用戶打分評(píng)分特效
很多網(wǎng)站都應(yīng)用了評(píng)分效果,讓用戶可以對(duì)正在瀏覽的文章、電影、資源等進(jìn)行評(píng)分,讓網(wǎng)站增添了幾分互動(dòng)效果。本文將講解如何使用jQuery來實(shí)現(xiàn)評(píng)分效果。2015-05-05基于jquery實(shí)現(xiàn)的表格分頁實(shí)現(xiàn)代碼
該方法的運(yùn)用是從后臺(tái)數(shù)據(jù)庫中一次性取出所有的數(shù)據(jù),運(yùn)用Jquery把一部分?jǐn)?shù)據(jù)隱藏起來,事實(shí)上數(shù)據(jù)還是全部在html頁面中2011-06-06jquery做的一個(gè)簡(jiǎn)單的屏幕鎖定提示框
這篇文章主要介紹了使用jquery做的一個(gè)簡(jiǎn)單的屏幕鎖定提示框,需要的朋友可以參考下2014-03-03