


js melaksanakan kod perkhidmatan pelanggan dalam talian QQ yang mudah terapung di sebelah kanan kemahiran laman web_javascript
May 16, 2016 pm 03:40 PMContoh dalam artikel ini menerangkan pelaksanaan js kod perkhidmatan pelanggan dalam talian QQ yang mudah terapung di sebelah kanan halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah versi ringkas perkhidmatan pelanggan dalam talian QQ Sebenarnya, yang penting adalah fungsi JS ini, selagi anda mempunyai fungsi JS ini, anda sebenarnya boleh menulis perkhidmatan pelanggan dalam talian untuk mengawal menyembunyikan lapisan dan mengembang. Perhatikan nombor QQ dalam kod dan ingat untuk menukarnya.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-float-qq-onlinefk-style-codes/
Kod khusus adalah seperti berikut:
<!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实现浮动在网页右侧的简洁QQ在线客服</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="悠 然 设 计"><img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">主机业务</a><br/></div> <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=365286" title="网页制作"><img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">租用托管</a></div> <div class="qqkfhm bgdh">手机: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>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok

Cara membuat carta candlestick saham menggunakan PHP dan JS

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta

Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi pemprosesan acara klik peta

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi peta haba peta
