jQuery實現(xiàn)仿QQ在線客服效果的滾動層代碼
更新時間:2015年10月15日 11:09:53 作者:企鵝
這篇文章主要介紹了jQuery實現(xiàn)仿QQ在線客服效果的滾動層代碼,可實現(xiàn)實時讀取屏幕高度并顯示的功能,涉及jQuery響應滾動事件及定時操作的相關技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)仿QQ在線客服效果的滾動層代碼。分享給大家供大家參考。具體如下:
這是一款jQuery滾動層,可以做成仿QQ在線客服,雖然效果有點生硬,但水平就這么高了,彈出層是挺實用的,期待大家有新的改進。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-f-qq-online-style-scroll-style-demo/
具體代碼如下:
<!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=gb2312" /> <title>jQuery滾動層,仿QQ在線客服</title> <style type="text/css"> <!-- #qqonline { background-color:Yellow; border: 1px solid #fcc; position:absolute; top:250px; left:18px; width:200px; height:120px; } --> </style> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript"> $().ready(function(){ $(window).scroll(function() { window.setTimeout(function(){ var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { bodyTop = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollTop; } $("#qqonline").css("top", 100 + bodyTop) $("#qqonline").text(bodyTop); },300) }) }); </script> </head> <body style="height:1800px"> <div id="qqonline"> QQ在線服務 </div> </body> </html>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
3Z版基于jquery的圖片復選框(asp.net+jquery)
最近在做一個彩票縮水工具,找了幾個圖片復選框插件始終感覺不太滿意,自己動手山寨了一下imageTick插件.2010-04-04基于jQuery實現(xiàn)點擊最后一行實現(xiàn)行自增效果的表格
現(xiàn)在任何事務都追求效率和人性化,當然網(wǎng)頁效果也是如此,如果一個可以編輯數(shù)據(jù)的表格,編輯到最后一行的時候,點擊可以自動添加一行,這樣算是一個比較人性化的效果,可以免去一絲勞頓之苦,下面分享一段這樣的代碼2016-01-01