jQuery實現(xiàn)的簡單懸浮層功能完整實例
更新時間：2017年01月23日 08:48:59 作者：pan_junbiao
這篇文章主要介紹了jQuery實現(xiàn)的簡單懸浮層功能,結(jié)合完整實例形式分析了jQuery基于時間函數(shù)動態(tài)修改css樣式實現(xiàn)窗口浮動效果的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的簡單懸浮層功能。分享給大家供大家參考，具體如下：
運行效果圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" >
$(function() {
var timer, scrollTop, sideDiv = $('#fudong').appendTo('body');
$(window).scroll(function() {
timer && clearTimeout(timer);
scrollTop = $(this).scrollTop();
timer = setTimeout(function() {
sideDiv.animate({
top: scrollTop + 100 + 'px'
}, 600);
}, 200);
});
});
</script>
</head>
<body >
<div id="fudong" style="border:1px solid #454545; width:150px; height:400px; position: absolute; right: 20px; top: 100px;">
右側(cè)懸浮層
</div>
</body>
</html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
簡易驗證插件simpleValidate使用心得，基于JQuery，修改小BUG后能兼容各瀏覽器，附自用版本供下載2014-01-01
這篇文章主要為大家詳細介紹了jquery仿京東商品瀏覽頁面，鼠標放在圖片上實現(xiàn)放大效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
jquery提示效果有很多，本文也提供一個超漂亮的仿騰訊彈出層效果，熱愛特效的你可千萬不要錯過了啊，希望本文提供的案例對你學習jquery特效有所幫助2013-02-02
jQuery 是我最喜歡的一個Javascript框架，下文中包含了眾多��以為jQuery愛好者們使用的插件。如果你還知道其他的好東西，歡迎與大家分享。2011-08-08
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能，需要的朋友可以參考下。2011-10-10
jQuery實現(xiàn)input輸入框獲取焦點與失去焦點時提示的消失與顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)input輸入框獲取焦點與失去焦點時提示的消失與顯示功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
本篇文章主要是對jquery 刪除字符串最后一個字符的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery實現(xiàn)鼠標移到元素上動態(tài)提示消息框效果
當光標移動到某些元素上時，會彈出像tips的提示框，這種效果想必大家都有見到過吧，下面有個不錯的示例，大家可以感受下2013-10-10
JQuery統(tǒng)計input和textarea文字輸入數(shù)量(代碼分享)
本文主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
jQuery是一個非常好用的javascript框架，我尤其喜歡它強大的選擇器和鏈式表達式，使得我們能通過簡單的語句實現(xiàn)復雜的功能。它還有一個重要的特點就是它的可擴展性，使得很多人都可以開發(fā)他們的插件并且分享出來2011-12-12