首页 > 特效插件 > 在线客服 >  抽屉式的依次滑出的QQ在线客服正文

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

特效介绍
qq客服代码
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>