jQuery版QQ在线客服代码

最新推荐文章于 2025-11-11 08:57:18 发布

原创最新推荐文章于 2025-11-11 08:57:18 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

Jquery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一款使用jQuery实现的QQ在线客服悬浮窗代码。该客服窗口可以根据页面滚动进行位置调整，并支持展开和收起功能，适用于网页中集成在线客服系统。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery版QQ在线客服代码</title>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<style>
.service {
	top:130px;
	right:0;
	position:absolute;
}
.service-open {
	background:url(images/service-open.png) no-repeat;
	width:130px;
	height:108px;
	cursor:pointer;
}
.service-close {
	background:url(images/service-open.png) no-repeat;
	height:121px;
	width:23px;
	overflow:hidden;
	cursor:pointer;
}
.service-button {
	width:23px;
	height:121px;
	float:left;
	cursor:hand;
}
.service-inside {
    width:103px;
    height:208px;
    float:right;
    cursor:pointer;
    overflow:hidden;
}
</style>
<script>
$(document).ready(function(){
    var destDiv = $("#divSerWin");
    var startPos = destDiv.position().top;
    var divHeight = destDiv.outerHeight();
    
    $(window).scroll(function (){
        scrTop = $(window).scrollTop();
        if( startPos < scrTop){
            topPos = startPos+(scrTop - startPos)+10;
            $("#divSerWin").css("position", "absolute").css("top", topPos +"px").css('zIndex', '500');
        }
    });
});

function ClickSer(){
    var obj=$("#divMySer")
    if( obj.attr("class") == "service-open" ){
        $("#divMySer").removeClass("service-open").addClass("service-close");
        $(".service-inside").hide();
    }else{
        $("#divMySer").removeClass("service-close").addClass("service-open");
        $(".service-inside").show();
    }
}
</script>
<div id="divSerWin" class="service">
<div id="divMySer" class="service-open">
<div class="service-button" onclick="ClickSer();"></div>
<div class="service-inside">
<img src="images/service-open2.png" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="5,56,100,80" href="#" />
<area shape="rect" coords="7,89,98,112" href="#" />
<area shape="rect" coords="12,127,102,150" href="#" />
<area shape="rect" coords="14,161,99,184" href="#" />
</map>
</div>
</div>
</div>

</body>
</html>