jQuery控制div實現(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>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06jQuery實現(xiàn)圖片放大預(yù)覽實現(xiàn)原理及代碼
jQuery實現(xiàn)圖片放大原理很簡單,就是將圖片顯示的尺寸變大后放在瀏覽器的一個指定位置,從而實現(xiàn)圖片的放大預(yù)覽,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09jQuery jqgrid 對含特殊字符json 數(shù)據(jù)的 Java 處理方法
在網(wǎng)頁上使用 json 數(shù)據(jù),如果數(shù)據(jù)中含有特殊字符,會比較麻煩。2011-01-01jQuery實現(xiàn)Div拖動+鍵盤控制綜合效果的方法
這篇文章主要介紹了jQuery實現(xiàn)Div拖動+鍵盤控制綜合效果的方法,實例分析了jQuery操作div塊拖動的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03基于jquery實現(xiàn)的表格分頁實現(xiàn)代碼
該方法的運用是從后臺數(shù)據(jù)庫中一次性取出所有的數(shù)據(jù),運用Jquery把一部分數(shù)據(jù)隱藏起來,事實上數(shù)據(jù)還是全部在html頁面中2011-06-06