<!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>
jQuery版QQ在线客服代码
最新推荐文章于 2024-07-08 13:49:11 发布