我是靠谱客的博主 开心麦片,这篇文章主要介绍js实现浮动在网页右侧的简洁QQ在线客服代码,现在分享给大家,希望可以做个参考。

本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码。分享给大家供大家参考。具体如下:

这是一个简洁版的QQ在线客服,其实重要的是这个JS函数,只要有了这个JS函数,实际上你完全可以写一个这样的在线客服,它是用JS+CSS去控制层的隐藏与展开。注意代码中的QQ号记着要改一下哦。

运行效果截图如下:

在线演示地址如下:

http://demo.uoften.com/js/2015/js-float-qq-onlinefk-style-codes/

具体代码如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!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>

希望本文所述对大家的javascript程序设计有所帮助。

最后

以上就是开心麦片最近收集整理的关于js实现浮动在网页右侧的简洁QQ在线客服代码的全部内容,更多相关js实现浮动在网页右侧内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(143)

评论列表共有 0 条评论

立即
投稿
返回
顶部