jQuery右侧滚动条浮动在线客服代码点击展开收缩



192 765 256



特效描述:jQuery右侧滚动条 浮动在线客服 点击展开收缩,右侧浮动在线客服代码

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<!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>jQuery隐藏收缩在线客服</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background-image:url(/static/css/about:blank);background-attachment:fixed}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/*在线客服代码*/
.rides-cs{background:#333;position:fixed;top:130px;right:1px;z-index:999;}
*html .rides-cs{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin:130px 0 0 0;}
.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;}
.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;}
.rides-cs .cn h3{font-size:14px;color:#333;font-weight:600;line-height:24px;padding:5px}
.rides-cs .cn ul{padding:0 0 0 8px;}
.rides-cs .cn ul li{line-height:38px;height:38px;border-bottom:solid 1px #E6E4E4;overflow:hidden;}
.rides-cs .cn ul li span{color:#777;}
.rides-cs .cn ul li img{vertical-align:middle;}
.rides-cs .btnOpen,.rides-cs .btnCtn{position:relative;z-index:9;top:0;left:0;background:url(shopnc.png) no-repeat;display:block;width:20px;height:146px;overflow:hidden;padding:8px;}
.rides-cs .btnOpen{background-position:8px 12px;}
.rides-cs .btnCtn{background-position:-31px 12px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#aFloatTools_Show").click(function(){
		$('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){
			$('#divFloatToolsView').show();
		});
		$('#aFloatTools_Show').attr('style','display:none');
		$('#aFloatTools_Hide').attr('style','display:block');
	});
	$("#aFloatTools_Hide").click(function(){
		$('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){
			$('#divFloatToolsView').hide();
		});
		$('#aFloatTools_Show').attr('style','display:block');
		$('#aFloatTools_Hide').attr('style','display:none');
	});
});
</script>
</head>
<body style="height:1000px;">
<div class="rides-cs">
	<div class="floatL">
		<a style="display:block" id="aFloatTools_Show" class="btnOpen" title="查看在线客服" href="javascript:void(0);">展开</a>
		<a style="display:none" id="aFloatTools_Hide" class="btnCtn" title="关闭在线客服" href="javascript:void(0);">收缩</a>
	</div>
	<div id="divFloatToolsView" class="floatR" style="display:none">
		<div class="cn">
			<h3 class="titZx">产品销售</h3>
			<ul>
				<li><span>客服1</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="17素材网客服" title="17素材网客服" /></a></li>
				<li><span>客服2</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="17素材网客服" title="17素材网客服" /></a></li>
			</ul>
			<h3>大宗订制</h3>
			<ul>
				<li><span>订 制</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="17素材网客服" title="17素材网客服" /></a></li>
			</ul>
			<h3>售后服务</h3>
			<ul>
				<li><span>售 后</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="17素材网客服" title="17素材网客服" /></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 悬浮浮动 收缩展开 浮动提示框 切换按钮 在线客服 表单 导航菜单 浮动导航菜单 qq在线客服 收缩导航菜单 在线客服插件 侧边导航菜单 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到