蓝色网站右侧飘浮QQ在线客服代码

来源:https://www.sucaihuo.com/js/1328.html 2017-02-07 22:57浏览(460) 收藏

跟之前的QQ在线客服一样的效果,始终固定在网页右侧,无论页面如何滚动,它始终保持原定位置。不同的就是它的设计风格而已,压缩包里含两种状态,默认展开状态。
蓝色网站右侧飘浮QQ在线客服代码
分类:其它特效 > 在线客服 难易:入门级
查看演示 下载资源 下载积分: 20 积分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>蓝色网站右侧飘浮QQ在线客服代码</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
.rides-cs {  font-size: 12px; background:#29a7e2; position: fixed; top: 250px; right: 0px; _position: absolute; z-index: 1500; border-radius:6px 0px 0 6px;}
.rides-cs a { color: #00A0E9;}
.rides-cs a:hover { color: #ff8100; text-decoration: none;}
.rides-cs .floatL { width: 36px; float:left; position: relative; z-index:1;margin-top: 21px;height: 181px;}
.rides-cs .floatL a { font-size:0; text-indent: -999em; display: block;}
.rides-cs .floatR { width: 130px; float: left; padding: 5px; overflow:hidden;}
.rides-cs .floatR .cn {background:#F7F7F7; border-radius:6px;margin-top:4px;}
.rides-cs .cn .titZx{ font-size: 14px; color: #333;font-weight:600; line-height:24px;padding:5px;text-align:center;}
.rides-cs .cn ul {padding:0px;}
.rides-cs .cn ul li { line-height: 38px; height:38px;border-bottom: solid 1px #E6E4E4;overflow: hidden;text-align:center;}
.rides-cs .cn ul li span { color: #777;}
.rides-cs .cn ul li a{color: #777;}
.rides-cs .cn ul li img { vertical-align: middle;}
.rides-cs .btnOpen, .rides-cs .btnCtn {  position: relative; z-index:9; top:25px; left: 0;  background-image: url(./images/kefu.png); background-repeat: no-repeat; display:block;  height: 146px; padding: 8px;}
.rides-cs .btnOpen { background-position: 0 0;}
.rides-cs .btnCtn { background-position: -37px 0;}
.rides-cs ul li.top { border-bottom: solid #ACE5F9 1px;}
.rides-cs ul li.bot { border-bottom: none;}
</style>
</head>
<body style="height:2000px;">
<!--代码部分begin-->
<div id="floatTools" class="rides-cs" style="height:246px;">
  <div class="floatL">
	<a id="aFloatTools_Show" class="btnCtn" title="关闭在线客服" style="top:20px;display:block" href="javascript:void(0);">收缩</a>
	<a id="aFloatTools_Hide" class="btnOpen" title="查看在线客服" style="top:20px;display:none" href="javascript:void(0);">展开</a>
  </div>
  <div id="divFloatToolsView" class="floatR" style="display:block;height:237px;width: 140px;">
    <div class="cn">
      <h3 class="titZx">网页在线客服</h3>
      <ul>
        <li><span>客服1</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="./images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
        <li><span>客服2</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="./images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
        <li><span>客服3</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="./images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
        <li>
            <a href="http://www.sucaihuo.com/" target="_blank">素材火JS代码素材</a>
            <div class="div_clear"></div>
        </li>
        <li style="border:none;"><span>电话:400-000-0000</span> </li>
      </ul>
    </div>
  </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
	$(function(){
		$("#aFloatTools_Hide").click(function(){
			$('#divFloatToolsView').animate({width:'show', opacity:'show'},100,function(){$('#divFloatToolsView').show();});
			$('#aFloatTools_Show').show();
			$('#aFloatTools_Hide').hide();	
		});
		$("#aFloatTools_Show").click(function(){
			$('#divFloatToolsView').animate({width:'hide',opacity:'hide'},100,function(){$('#divFloatToolsView').hide();});
			$('#aFloatTools_Show').hide();
			$('#aFloatTools_Hide').show();				
		});
	});
</script>
<!--代码部分end-->
</body>
</html>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2