抽屉式的依次滑出的QQ在线客服

        基于jQuery的抽屉式的依次滑出的QQ在线客服，一开始只显示六个按钮，当鼠标移动到按钮上时，会像抽屉一样，从右侧滑出按钮的功能名称，当移动到“人民币”标志的按钮上时，会弹出一张图标，您可以更换成您的图片。点击最下面的箭头，可以触发返回顶部事件。
1、在头部引入相关css文件：

<link href="css/5imoban.net.css" rel="stylesheet" type="text/css" />

2、在您的body加入下面的html代码：

<div id="leftsead">
    <ul>
        <li>
            <a href="http://www.5imoban.net/" target="_blank">
                <img src="images/ll01.png" width="131" height="49" class="hides"/>
                <img src="images/l01.png" width="47" height="49" class="shows" />
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank">
                <img src="images/ll03.png" width="131" height="49" class="hides" />
                <img src="images/l03.png" width="47" height="49" class="shows" />
            </a>
        </li>
        <li>
            <a class="youhui">
                <img src="images/l02.png" width="47" height="49" class="shows" />
                <img src="images/youhui.png" width="145" height="343" class="hides" usemap="#taklhtml"/>
                <map name="taklhtml"><area shape="rect" coords="26,273,115,300 " href="http://www.5imoban.net/" /></map>
            </a>
        </li>
        <li>
            <a href="tencent://message/?uin=543031222&Site=www.5imoban.net&Menu=yes">
                <img src="images/ll04.png" width="131" height="49" class="hides"/>
                <img src="images/l04.png" width="47" height="49" class="shows"/>
            </a>
        </li>
        <li>
            <a href="http://www.5imoban.net/" target="_blank">
                <img src="images/ll05.png" width="131" height="49" class="hides"/>
                <img src="images/l05.png" width="47" height="49" class="shows" />
            </a>
        </li>
        <li>
            <a id="top_btn">
                <img src="images/ll06.png" width="131" height="49" class="hides"/>
                <img src="images/l06.png" width="47" height="49" class="shows" />
            </a>
        </li>
    </ul>
</div>

3、在HTML代码引入jquery以及js代码：

<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("#leftsead 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}, 300);});

});
</script>