蓝色左侧悬浮及中间隔段时间显示的在线客服代码

        我爱模板网原创，显示在页面左侧的蓝色，三角形质感背景的悬浮及中间隔段时间显示的在线客服代码，客服列表鼠标移动上去会翻转一周。客服妹子会眨眼。中间每隔5秒回显示一次对话框，当关闭后，5秒之后仍旧会弹出来。如果感觉比较烦人，可以用cookie或其他本地存储技术记录下，当点击关闭了，几天之内不再弹出。

        另外：学网页设计到合肥多元速网页设计培训公司。
1、下载解压本在线客服插件，将images目录的图片放到您的项目里。
        注：上面的电话号码和客服名称，都可以在images目录找到PSD源文件，修改方便。

2、用编辑器打开index.html，找到下面代码，放到您的css文件里面：

.kefu_qq{ width:143px; height:auto; overflow:hidden; position:fixed; left:0; top:30%; z-index:9999;}
.kefu_qq .top{width:143px; height:68px; background:url(images/cslist_top_bg.gif) no-repeat;}
.kefu_qq .main{ width:138px; height:171px; overflow:hidden; background:url(images/right_bg.png) repeat-y left top;text-align:left; font-size:12px; padding-left:5px;}
.kefu_qq .main a{display:block; padding-left:8px; padding-top:6px; outline:none;}
.kefu_qq .main a img{transition:all 800ms; transform:rotateX(0)}
.kefu_qq .main a:hover img{transform:rotateX(360deg)}
.kefu_qq .bottom{ width:143px; height:17px; background:url(images/cslist_btm_bg.png) no-repeat;}
.kefu_tanchuang{ width:490px; height:226px; background:url(images/invite_bg.png) no-repeat; position:fixed; left:50%; top:50%; margin:-113px 0 0 -245px; display:none;}
.kefu_tanchuang ul .close{ width:25px; height:25px; display:block; position:absolute; right:8px; top:0;}
.kefu_tanchuang ul{width:490px; height:226px; position:relative;}
.kefu_tanchuang ul a{ display:block; width:100px; height:32px; position:absolute; top:160px;}

3、将下面的html代码和js代码放到您需要使用到本插件的页面：

<div class="kefu_qq">
	<div class="top"></div>
    <div class="main">
		<a href="tencent://message/?uin=543031222&Site=doysu.com" target="_blank">
        	<img src="images/kf1.png" />
        </a>
		<a href="tencent://message/?uin=543031222&Site=doysu.com" target="_blank">
        	<img src="images/kf2.png" />
        </a>
		<a href="tencent://message/?uin=543031222&Site=doysu.com" target="_blank">
        	<img src="images/kf3.png" />
        </a>
		<a href="tencent://message/?uin=543031222&Site=doysu.com" target="_blank">
        	<img src="images/kf4.png" />
        </a>
		<a href="javascript:;">
        	<img src="images/kf5.png" />
        </a>
    </div>
    <div class="bottom"></div>
</div>
<div class="kefu_tanchuang">
	<ul>
        <a href="javascript:;" class="close"></a>
		<a href="tencent://message/?uin=543031222&Site=doysu.com" target="_blank" style="left:230px;"></a>
    	<a href="javascript:;" class="shaohou_btn" style="right:20px;"></a>
    </ul>
</div>
<script type="text/javascript" src="http://www.doysu.com/js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
	$('.kefu_tanchuang').delay(3000).slideDown();
	$('.close,.shaohou_btn').click(function(){
		$('.kefu_tanchuang').slideUp();
		setTimeout(function(){$('.kefu_tanchuang').slideDown()},5000);
	});
});
</script>

注：3000为第一次显示时间，5000为每次点击关闭或者稍后再说后，再次显示所等待的时间。单位毫秒。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！