在网页上添加QQ在线功能:
View Code
<style> H2 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none } UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none } LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none } A:hover { COLOR: #000000 } A { FONT-SIZE: 12px; COLOR: #696969; TEXT-DECORATION: none } .QQbox { Z-INDEX: 99; RIGHT: 0px; WIDTH: 178px; POSITION: absolute; TOP: 40px } .QQbox .press { RIGHT: 0px; WIDTH: 33px; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: absolute; HEIGHT: 158px; BORDER-BOTTOM-STYLE: none } .QQbox .Qlist { BACKGROUND: url(images/qq/qq_listbg.gif) repeat-y -155px 0px; LEFT: 0px; WIDTH: 145px; POSITION: absolute } .QQbox .Qlist .t { FONT-SIZE: 1px; FLOAT: right; WIDTH: 145px; HEIGHT: 6px } .QQbox .Qlist .b { FONT-SIZE: 1px; FLOAT: right; WIDTH: 145px; HEIGHT: 6px } .QQbox .Qlist .t { BACKGROUND: url(images/qq/qq_listbg.gif) no-repeat left 50% } .QQbox .Qlist .b { BACKGROUND: url(images/qq/qq_listbg.gif) no-repeat right 50% } .QQbox .Qlist .con { BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 90% } .QQbox .Qlist .con H2 { BORDER-RIGHT: #3a708d 1px solid; BORDER-TOP: #3a708d 1px solid; BACKGROUND: url(images/qq/qq_listbg.gif) repeat-y -163px 0px; FONT: bold 12px/22px "宋体"; BORDER-LEFT: #3a708d 1px solid; COLOR: #fff; BORDER-BOTTOM: #3a708d 1px solid; HEIGHT: 22px; TEXT-ALIGN: center } .QQbox .Qlist .con UL { } .QQbox .Qlist .con UL LI { PADDING-RIGHT: 0px; PADDING-LEFT: 8px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; PADDING-TOP: 5px; HEIGHT: 20px } .QQbox .Qlist .con UL LI.odd { BACKGROUND: #fff } </style> <div class='QQbox' id='divQQbox' > <div class='Qlist' id='divOnline' onmouseout='hideMsgBox(event);' style='display : none;'> <div class='t'></div> <div class='con'> <h2>在线客服</h2> <ul> <li class=odd><a href=' http://wpa.qq.com/msgrd?V=1&Uin=1234567890&Site=懒人图库欢迎您&Menu=yes' target='_blank'><img src=' http://wpa.qq.com/pa?p=1:123456789:4' border='0' alt='QQ' />商城客服</a></li> <li><a href=' http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=懒人图库欢迎您&Menu=yes' target='_blank'><img src=' http://wpa.qq.com/pa?p=1:858854788:4' border='0' alt='QQ' />商城售后</a></li> <tr><td> <li> <a target="_blank" href="http://amos.im.alisoft.com/msg.aw?v=2&uid=szmaimaiba&site=cntaobao&s=1&charset=utf-8" > <img border="0" src="http://amos.im.alisoft.com/online.aw?v=2&uid=szmaimaiba&site=cntaobao&s=1&charset=utf-8" alt="懒人图库欢迎您" /> </a></li></td></tr> <!--tr><td> <li> <a target="_blank" href="http://amos.im.alisoft.com/msg.aw?v=2&uid=%E8%88%9E%E8%B9%88%E7%94%A8%E5%93%81%E6%89%B9%E5%8F%91%E5%BA%97&site=cntaobao&s=1&charset=utf-8" > <img border="0" src="http://amos.im.alisoft.com/online.aw?v=2&uid=%E8%88%9E%E8%B9%88%E7%94%A8%E5%93%81%E6%89%B9%E5%8F%91%E5%BA%97&site=cntaobao&s=1&charset=utf-8" alt="懒人图库欢迎您" /> </a> </li> </td> </tr--> </ul> </div> <div class='b'></div> </div> <div id='divMenu' onmouseover='OnlineOver();'><img src='./images/qq/qq_1.png' class='press' alt='QQ客服热线'></div> </div> <script> 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; } old = pos; setTimeout(moveTips,tt); } initFloatTips(); function OnlineOver(){ document.getElementById("divMenu").style.display = "none"; document.getElementById("divOnline").style.display = "block"; document.getElementById("divQQbox").style.width = "145px"; } function OnlineOut(){ document.getElementById("divMenu").style.display = "block"; document.getElementById("divOnline").style.display = "none"; } function hideMsgBox(theEvent){ //theEvent用来传入事件,Firefox的方式 if (theEvent){ var browser=navigator.userAgent; //取得浏览器属性 if (browser.indexOf("Firefox")>0){ //如果是Firefox if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) { //如果是子元素 return; //结束函式 } } if (browser.indexOf("MSIE")>0){ //如果是IE if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素 return; //结束函式 } } } /*要执行的操作*/ document.getElementById("divMenu").style.display = "block"; document.getElementById("divOnline").style.display = "none"; } </script>