js實(shí)現(xiàn)浮動(dòng)在網(wǎng)頁(yè)右側(cè)的簡(jiǎn)潔QQ在線(xiàn)客服代碼
本文實(shí)例講述了js實(shí)現(xiàn)浮動(dòng)在網(wǎng)頁(yè)右側(cè)的簡(jiǎn)潔QQ在線(xiàn)客服代碼。分享給大家供大家參考。具體如下:
這是一個(gè)簡(jiǎn)潔版的QQ在線(xiàn)客服,其實(shí)重要的是這個(gè)JS函數(shù),只要有了這個(gè)JS函數(shù),實(shí)際上你完全可以寫(xiě)一個(gè)這樣的在線(xiàn)客服,它是用JS+CSS去控制層的隱藏與展開(kāi)。注意代碼中的QQ號(hào)記著要改一下哦。
運(yùn)行效果截圖如下:
在線(xiàn)演示地址如下:
http://demo.jb51.net/js/2015/js-float-qq-onlinefk-style-codes/
具體代碼如下:
<!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> <title>js實(shí)現(xiàn)浮動(dòng)在網(wǎng)頁(yè)右側(cè)的簡(jiǎn)潔QQ在線(xiàn)客服</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .qqbox a:link { color: #000; text-decoration: none; } .qqbox a:visited { color: #000; text-decoration: none; } .qqbox a:hover { color: #f80000; text-decoration: underline; } .qqbox a:active { color: #f80000; text-decoration: underline; } .qqbox{ width:132px; height:auto; overflow:hidden; position:absolute; right:0; top:100px; color:#000000; font-size:12px; letter-spacing:0px; } .qqlv{ width:25px; height:256px; overflow:hidden; position:relative; float:right; z-index:50px; } .qqkf{ width:120px; height:auto; overflow:hidden; right:0; top:0; z-index:99px; border:6px solid #138907; background:#fff; } .qqkfbt{ width:118px; height:20px; overflow:hidden; background:#138907; line-height:20px; font-weight:bold; color:#fff; position:relative; border:1px solid #9CD052; cursor:pointer; text-align:center; } .qqkfhm{ width:112px; height:22px; overflow:hidden; line-height:22px; padding-right:8px; position:relative; margin:3px 0; } .bgdh{ width:102px; padding-left:10px; } </style> </head> <body> <div class="qqbox" id="divQQbox"> <div class="qqlv" id="meumid" onmouseover="show()"><img src="images/qq.gif"></div> <div class="qqkf" style="display:none;" id="contentid" onmouseout="hideMsgBox(event)"> <div class="qqkfbt" onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',1,1);" id="qq-1" onfocus="this.blur();">客 服 中 心</div> <div id="K1"> <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=2563256" title="悠 然 設(shè) 計(jì)"><img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">主機(jī)業(yè)務(wù)</a><br/></div> <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=365286" title="網(wǎng)頁(yè)制作"><img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">租用托管</a></div> <div class="qqkfhm bgdh">手機(jī):12345692877</div> </div> </div> </div> <script language="javascript"> function showandhide(h_id,hon_class,hout_class,c_id,totalnumber,activeno) { var h_id,hon_id,hout_id,c_id,totalnumber,activeno; for (var i=1;i<=totalnumber;i++) { document.getElementById(c_id+i).style.display='none'; document.getElementById(h_id+i).className=hout_class; } document.getElementById(c_id+activeno).style.display='block'; document.getElementById(h_id+activeno).className=hon_class; } var tips; var theTop = 40; var old = theTop; function initFloatTips() { tips = document.getElementById('divQQbox'); moveTips(); } function moveTips() { var tt=50; if (window.innerHeight) { pos = window.pageYOffset }else if (document.documentElement && document.documentElement.scrollTop) { pos = document.documentElement.scrollTop }else if (document.body) { pos = document.body.scrollTop; } pos=pos-tips.offsetTop+theTop; pos=tips.offsetTop+pos/10; if (pos < theTop){ pos = theTop; } if (pos != old) { tips.style.top = pos+"px"; tt=10; //alert(tips.style.top); } old = pos; setTimeout(moveTips,tt); } initFloatTips(); if(typeof(HTMLElement)!="undefined") //firefox定義contains()方法,ie下不起作用 { HTMLElement.prototype.contains=function (obj) { while(obj!=null&&typeof(obj.tagName)!="undefind"){ if(obj==this) return true; obj=obj.parentNode; } return false; } } function show() { document.getElementById("meumid").style.display="none" document.getElementById("contentid").style.display="block" } function hideMsgBox(theEvent){ if (theEvent){ var browser=navigator.userAgent; if (browser.indexOf("Firefox")>0){ //如果是Firefox if (document.getElementById("contentid").contains(theEvent.relatedTarget)) { return } } if (browser.indexOf("MSIE")>0 || browser.indexOf("Presto")>=0){ if (document.getElementById('contentid').contains(event.toElement)) { return; } } } document.getElementById("meumid").style.display = "block"; document.getElementById("contentid").style.display = "none"; } </script> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 淺談JavaScript 代碼簡(jiǎn)潔之道
- 淺談時(shí)鐘的生成(js手寫(xiě)簡(jiǎn)潔代碼)
- JS實(shí)現(xiàn)超簡(jiǎn)潔網(wǎng)頁(yè)title標(biāo)題跑動(dòng)閃爍提示效果代碼
- js+css實(shí)現(xiàn)超簡(jiǎn)潔的二級(jí)下拉菜單效果代碼
- js實(shí)現(xiàn)簡(jiǎn)潔的TAB滑動(dòng)門(mén)效果代碼
- angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例(debounce)
- javascript函數(shù)的節(jié)流[throttle]與防抖[debounce]
- JavaScript中定時(shí)控制Throttle、Debounce和Immediate詳解
- JavaScript性能優(yōu)化之函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)
- javascript中的throttle和debounce淺析
- Javascript Throttle & Debounce應(yīng)用介紹
- javascript防抖函數(shù)debounce詳解
相關(guān)文章
javascript 解析后的xml對(duì)象的讀取方法細(xì)解
2009-07-07JavaScript中的無(wú)阻塞加載性能優(yōu)化方案
這篇文章主要介紹了JavaScript中的無(wú)阻塞加載性能優(yōu)化方案,本文講解了Deferred Scripts 延期腳本、Dynamic Script Elements 動(dòng)態(tài)腳本元素、XMLHttpRequest Script Injection XHR腳本注入等內(nèi)容,需要的朋友可以參考下2014-10-10uni-app分包項(xiàng)目實(shí)戰(zhàn)總結(jié)
在使用uniapp開(kāi)發(fā)過(guò)程中,隨著我們的代碼工程越來(lái)越大,必然會(huì)面臨一個(gè)問(wèn)題,就是打出來(lái)的包會(huì)越來(lái)越大,下面這篇文章主要給大家介紹了關(guān)于uni-app分包項(xiàng)目實(shí)戰(zhàn)的相關(guān)資料,需要的朋友可以參考下2022-04-04js對(duì)字符串進(jìn)行編碼的方法總結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇js對(duì)字符串進(jìn)行編碼的方法總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
FullPage.js 是一個(gè)簡(jiǎn)單而易于使用的插件,用來(lái)創(chuàng)建全屏滾動(dòng)網(wǎng)站(也被稱(chēng)為單頁(yè)網(wǎng)站)。接下來(lái)通過(guò)本文給大家介紹Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄,對(duì)fullpage.js導(dǎo)航欄相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03JS實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)刷新腳本的方法
要自動(dòng)刷新網(wǎng)頁(yè),你可以使用JavaScript腳本來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)刷新腳本的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11