jQuery版QQ在线客服代码

最新推荐文章于 2024-07-08 13:49:11 发布

fuyangclj

最新推荐文章于 2024-07-08 13:49:11 发布

阅读量1.1k

点赞数

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/clj9017/article/details/27112067

版权

Jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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" οnclick="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>

fuyangclj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery版QQ在线客服代码

jQuery版QQ在线客服代码.service { top:130px; right:0; position:absolute;}.service-open { background:url(images/service-open.png) no-repeat; width:130px; height:108px; cursor:pointer;}.service-
复制链接

扫一扫

专栏目录