jquery网站右侧悬浮在线客服QQ代码-易站站长网

代码介绍：

jquery网站右侧悬浮在线客服QQ代码，鼠标滑过可进行折叠与展开各项内容，具体效果请查看演示。

把代码中必要的数字/文字/图片信息修改为自己的信息，即可投入到自己的网站使用。

演示地址：

https://www.yizhanzzw.com/yanshi/kefu53

演示效果图片：

代码如下：

	<!-- 代码开始 www.yizhanzzw.com 易站站长网提供制作 -->
			<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

/* rightsead */
#rightsead{width:130px;height:350px;position:fixed; top:50%; margin-top:-175px;right:0px;}
*html #rightsead{margin-top:258px;position:absolute;top:expression(eval(document.documentElement.scrollTop));}
#rightsead li{width:131px;height:60px;}
#rightsead li img{float:right;}
#rightsead li a{height:49px;float:right;display:block;min-width:47px;max-width:131px;}
#rightsead li a .shows{display:block;}
#rightsead li a .hides{margin-right:-143px;cursor:pointer;cursor:hand;}
#rightsead li a.youhui .hides{display:none;position:absolute;right:188px;top:2px;}
</style>
			<div id="rightsead">
	<ul>
		<li><a href="http://www.yizhanzzw.com/"><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/ll01.png" width="131" height="49" class="hides"/><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/l01.png" width="77" height="49" class="shows" /></a></li>
		<li><a href="http://www.yizhanzzw.com/"><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/ll03.png" width="131" height="49"  class="hides"/><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/l03.png" width="77" height="49" class="shows" /></a></li>
		<li>
        <a class="youhui">
        <img src="https://www.yizhanzzw.com/yanshi/kefu53/images/l02.png" width="77" height="49" class="shows" /><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/yizhanzzw.png" width="145" height="343" class="hides" usemap="#taklhtml"/>
        <map name="taklhtml"><area shape="rect" coords="26,273,115,300 " href="http://www.yizhanzzw.com/" /></map>
        </a></li>
		<li><a href="tencent://message/?uin=12345678&Site=test315.nesky.cn&Menu=yes"><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/ll04.png" width="131" height="49" class="hides"/><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/l04.png" width="77" height="49" class="shows" /></a></li>
		<li><a href="http://www.yizhanzzw.com/"><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/ll05.png" width="131" height="49" class="hides"/><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/l05.png" width="77" height="49" class="shows" /></a></li>
		<li><a id="top_btn"><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/ll06.png" width="131" height="49" class="hides"/><img src="https://www.yizhanzzw.com/yanshi/kefu53/images/l06.png" width="77" height="49" class="shows" /></a></li>
	</ul>
</div>
<!-- 代码部分end -->

<script>
$(function(){
	$("#rightsead a").hover(function(){
		if($(this).prop("className")=="youhui"){
			$(this).children("img.hides").show();
		}else{
			$(this).children("img.hides").show();
			$(this).children("img.shows").hide();
			$(this).children("img.hides").animate({marginRight:'0px'},'slow'); 
		}
	},function(){ 
		if($(this).prop("className")=="youhui"){
			$(this).children("img.hides").hide('slow');
		}else{
			$(this).children("img.hides").animate({marginRight:'-143px'},'slow',function(){$(this).hide();$(this).next("img.shows").show();});
		}
	});

	$("#top_btn").click(function(){if(scroll=="off") return;$("html,body").animate({scrollTop: 0}, 600);});

});
</script>
<!-- 代码结束 www.yizhanzzw.com 易站站长网提供制作 -->