<!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=utf-8" />
<title>jQuery带返回顶部右侧悬浮在线客服代码 - 网页模板</title>
<meta name="keywords" content />
<meta name="description" content />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<div style="height:1200px;">
<div style="width:960px;margin:10px auto; clear:both; text-align:center; ">
</div>
<br />
<br />
<br />
<br />
往下拉看下右侧的效果 </div>
<!--右侧图标-->
<style>
li{ list-style:none}
#rightButton{ position:fixed; _position:absolute; top:208px; right:0; z-index:999999; display:block;}
#right_ul{ position:relative;}
#right_qq{ background:url(images/7_03.png) no-repeat; width:68px; height:74px; }
#right_tel{ background:url(images/7_05.png) no-repeat; width:68px; height:77px; }
#right_tip{ background:url(images/flag_right.png) no-repeat; width:252px; height:91px; position:absolute; right:70px; top:-10px; display:none; z-index:999999; }
.flagShow_p1{ float:left; margin-left:15px; _margin-left:5px; font-size:18px; line-height:91px;}
.flagShow_p2{ float:left; margin-left:10px; _margin-left:5px; font-size:18px; color:#FA7C00;}
.flagShow_p2 a{ display:block; margin: 20px 0 5px 12px; line-height:0;}
.flagShow_p2 span{ margin: 0 0 0 14px; }
.flag_qq{ display:none;}
#backToTop{ position:fixed; _position:absolute; bottom:50px; right:0; z-index:999999; display:none; }
a.backToTop_a{ background:url(images/7_08.png) no-repeat; width:68px; height:79px; display:block; }
a.backToTop_a:active{ background:url(images/7_11.png) no-repeat; }
.line91{ line-height:91px; }
</style>
<div id="rightButton">
<ul id="right_ul">
<li id="right_qq" class="right_ico" show="qq" hide="tel"></li>
<li id="right_tel" class="right_ico" show="tel" hide="qq"></li>
<li id="right_tip" class="png">
<p class="flagShow_p1 flag_tel">咨询电话</p>
<p class="flagShow_p2 flag_tel line91">400-800-8000</p>
<p class="flagShow_p1 flag_qq">咨询QQ</p>
<p class="flagShow_p2 flag_qq">
<a href="http://wpa.qq.com/msgrd?v=3&uin=80000000&site=qq&menu=yes" target="_blank">
<img border="0" src="images/qiyeQQ.png"></a> <span>80000000</span> </p>
</li>
</ul>
</div>
<div id="backToTop">
<a href="javascript:;" onfocus="this.blur();" class="backToTop_a png"></a>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.198zone.com/" target="_blank">代码笔记</a></p>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$("#rightButton").css("right", "0px");
var button_toggle = true;
$(".right_ico").live("mouseover", function(){
var tip_top;
var show= $(this).attr('show');
var hide= $(this).attr('hide');
tip_top = show == 'tel' ? 65 : -10;
button_toggle = false;
$("#right_tip").css("top" , tip_top).show().find(".flag_"+show).show();
$(".flag_"+hide).hide();
}).live("mouseout", function(){
button_toggle = true;
hideRightTip();
});
$("#right_tip").live("mouseover", function(){
button_toggle = false;
$(this).show();
}).live("mouseout", function(){
button_toggle = true;
hideRightTip();
});
function hideRightTip(){
setTimeout(function(){
if( button_toggle ) $("#right_tip").hide();
}, 500);
}
$("#backToTop").live("click", function(){
var _this = $(this);
$('html,body').animate({ scrollTop: 0 }, 500 ,function(){
_this.hide();
});
});
$(window).scroll(function(){
var htmlTop = $(document).scrollTop();
if( htmlTop > 0){
$("#backToTop").show();
}else{
$("#backToTop").hide();
}
});
});
</script>
</body>
</html>
<!--[if lte IE 6]>
<script src="js/phone/PNG.js" type="text/javascript"></script>
<script>
if( typeof(PNG) == 'object') PNG.fix('.png');
</script>
<![endif]-->
jQ带返回顶部右侧悬浮客服 jQuery带返回顶部右侧悬浮在线客服代码.zip （9个子文件） 
jQ带返回顶部右侧悬浮客服 jQuery带返回顶部右侧悬浮在线客服代码 jiaoben1265 images 
7_11.png 2KB 7_05.png 2KB qiyeQQ.png 4KB flag_right.png 2KB 7_08.png 2KB 7_03.png 4KB
index.html 4KB js 
PNG.js 10KB jquery-1.7.1.min.js 92KB资源评论
