JQ应用第3款：返回顶部、底部、微信、反馈我们共存

作者：杨红伟 网名：子弹兄 QQ：403236160 如发现本站有任何功能上的问题，请联系作者，谢谢！

一、介绍

现在微信的发展，还来了前所未有的进步！于是乎，网站右侧需要多种元素共存，返加顶部，返回底部，微信二维码，留言反馈共存于一个页面上，这时我们就需要这样一款JS来实现我们的效果！

二：使用教程

DEMO演示： http://www.ijquery.cn/study/demojs/0003

DEMO下载： http://www.ijquery.cn/study/demojs/0003/0003.zip

1、HTML代码：

<!--start-->
<div id="floatPanel">
	<div class="ctrolPanel">
		<a class="arrow" href="#"><span>顶部</span></a>
		<a class="contact" href="#" target="_blank"><span>反馈</span></a>
		<a class="qrcode" href="#"><span>微信二维码</span></a>
		<a class="arrow" href="#"><span>底部</span></a>
	</div>
	<div class="popPanel">
		<div class="popPanel-inner">
			<div class="qrcodePanel"><img src="images/weixin.jpg" /><span>扫描二维码关注我为好友</span></div>
			<div class="arrowPanel">
				<div class="arrow01"></div>
				<div class="arrow02"></div>
			</div>
		</div>
	</div>
</div>
<!--end-->

2、JS代码：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		// 页面浮动面板
		$("#floatPanel > .ctrolPanel > a.arrow").eq(0).click(function(){
			$("html,body").animate({scrollTop :0}, 800);
			return false;
		});
		$("#floatPanel > .ctrolPanel > a.arrow").eq(1).click(function(){
			$("html,body").animate({scrollTop : $(document).height()}, 800);
			return false;
		});
		
		var objPopPanel = $("#floatPanel > .popPanel");	
		var w = objPopPanel.outerWidth();
		
		$("#floatPanel > .ctrolPanel > a.qrcode").bind({mouseover:function(){
			objPopPanel.css("width","0px").show();
			objPopPanel.animate({"width" : w + "px"},300);
			return false;
			},mouseout : function(){
			objPopPanel.animate({"width" : "0px"},300);
			return false;
			objPopPanel.css("width",w + "px");
		}	
		});
		
	});
</script>

3、CSS代码：

/* floatPanel */
#floatPanel .ctrolPanel{width:36px;height:166px;background:#fff url(../images/float-panel-bg.gif) no-repeat left top;border:solid 1px #ddd;position:fixed;right:25px;top:300px;overflow:hidden;z-index:10000; _position:absolute; /* for IE6 */_top:expression(documentElement.scrollTop + 300);}
#floatPanel .ctrolPanel a{width:34px;font-size:12px;color:#ff6600;letter-spacing:1px;text-align:center;overflow:hidden;}
#floatPanel .ctrolPanel .arrow{height:29px;line-height:28px;display:block;margin:1px auto;}
#floatPanel .ctrolPanel .arrow span{display:none;}
#floatPanel .ctrolPanel .arrow:hover{background:#f4f4f4;}
#floatPanel .ctrolPanel .arrow:hover span{display:block;}
#floatPanel .ctrolPanel .contact{height:60px;display:block;margin:2px auto;}
#floatPanel .ctrolPanel .contact span{line-height:90px;}
#floatPanel .ctrolPanel .qrcode{height:40px;display:block;margin:2px auto;}
#floatPanel .ctrolPanel .qrcode span{display:none;}

#floatPanel .popPanel{width:230px;height:242px;position:fixed;right:70px;top:300px;z-index:10000;overflow:hidden;display:none;_position:absolute; /* for IE6 */_top:expression(documentElement.scrollTop + 300); }
#floatPanel .popPanel .popPanel-inner{width:230px;height:242px;position:relative;overflow:hidden;}
#floatPanel .popPanel .popPanel-inner .arrowPanel{width:10px;height:240px;position:absolute;right:1px;top:102px;}
#floatPanel .popPanel .popPanel-inner .arrowPanel .arrow01{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #ddd;position:absolute;bottom:0;position:absolute;left:2px;top:0;}
#floatPanel .popPanel .popPanel-inner .arrowPanel .arrow02{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #fff;position:absolute;bottom:0;position:absolute;left:0;top:0;}
#floatPanel .popPanel .popPanel-inner .qrcodePanel{width:220px;height:240px;text-align:center;background:#fff;border:solid 1px #ddd;position:absolute;left:0;top:0;overflow:hidden;}
#floatPanel .popPanel .popPanel-inner .qrcodePanel img{width:200px;height:200px;border:none;padding:10px 10px 5px 10px;}
#floatPanel .popPanel .popPanel-inner .qrcodePanel span{font-size:12px;color:#666;line-height:24px;letter-spacing:1px;}