----------------------------------------------------
<!--
var mypath='',mypaths
for(i=0i<document.scripts.lengthi++)
{
if(document.scripts[i].src.indexOf('js/sk.js?')!='-1')
{
mypath=document.scripts[i].src
mypaths=mypath.split('?')
mypath=mypaths[1]
break
}
}
function WriteQqStr()
{
调用QQ的代码
}
function close_float_right(){backi.style.visibility='hidden'}
lastScrollY=0
function heartBeat(){
diffY=document.documentElement.scrollTop
percent=.1*(diffY-lastScrollY)
if(percent>0)percent=Math.ceil(percent)
else percent=Math.floor(percent)
document.all.backi.style.pixelTop+=percent
lastScrollY=lastScrollY+percent
}
if (!document.layers) {WriteQqStr()window.setInterval("heartBeat()",1)}
//-->
------------------------------------------------------------------------
厘米工厂 http://www.limitory.com/
欢迎喜欢 Drupal 的站长一起交流!
本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考,具体如下:这是又一个网页上的在线客服代码,不错,可以用一下哦。与其它客服不一样的地方呢?无非是在网页左侧滑出,可对客服类型分组,又多了一个功能,哈哈。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-left-online-kf-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>
<title>网页左侧浮动jquery在线QQ客服代码</title>
<style>
*{margin:0pxpadding:0pxoutline:nonelist-style-type:noneborder:none}
/*
QQbox
*/
.QQbox{z-index:1000width:410pxleft:-276pxtop:0margin:149px
0
0
0position:fixed}
*html,
*html
body{background-image:url(about:blank)background-attachment:fixed}
*html
.QQbox{position:absolute
top:expression(eval(document.documentElement.scrollTop))}
.QQbox
.press{left:0border:nonecursor:pointerwidth:32pxheight:96pxposition:absolutepadding-top:140px}
.QQbox
.Qlist{float:leftwidth:410pxbackground:url(images/bj01.png)
no-repeatbackground-position:1px
0pxheight:436pxdisplay:blockoverflow:hiddenzoom:1}
.QQbox
.Qlist
.infobox{text-align:centerbackground-repeat:no-repeatpadding:5pxline-height:14pxcolor:#CCCCCCfont-weight:700}
.QQbox
.Qlist
.con{margin-top:266pxmargin-left:50pxcolor:#32567efont-size:14px}
.QQbox
.Qlist
.con
ul
li{height:31pxlist-style:nonemargin-left:35px}
.QQbox
.Qlist
.con
ul
li
a{font-size:13pxmargin-left:18pxtext-decoration:none}
.OnlineLeft{float:leftdisplay:inlinewidth:262pxheight:439pxoverflow:hiddenzoom:1}
.OnlineBtn{float:rightdisplay:inlinewidth:127pxheight:36pxbackground:url(images/bj02.png)
no-repeatmargin-top:-45pxmargin-left:220px}
</style>
<script
type="text/javascript"
src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div
id="divQQbox"
class="QQbox">
<div
id="divOnline"
class="Qlist">
<div
class="OnlineLeft">
<div
class="con">
<ul>
<li>售前咨询<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>网站建设<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>网站优化<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>整合营销<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>售后服务<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
</ul>
</div>
</div>
<div
class="OnlineBtn">
</div>
</div>
</div>
<script
type="text/javascript">
$(function(){
//建站热线展开效果
$("#divQQbox").hover(
function(){
$(this).stop(true,false)
$(this).animate({left:0},300)
},
function(){
$(this).animate({left:-276},149)
}
)
})
</script>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
<script>function scrolls(){
var advobj=document.getElementById("adv")
advobj.style.top=100+document.documentElement.scrollTop+"px"
}
window.onscroll=scrolls
function winclose(){
var advobj=document.getElementById("adv")
advobj.style.display="none"
}
</script>
<body>
<!--随滚动条移动的浮动窗口############################-->
<div id="adv" style="">
<img src="图片路径"/>
<div id="close" onclick="winclose()">关闭</div>
</div>
<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"scrolling="no"></iframe></div>
</body>