jQuery页面右侧浮动在线留言客服代码和qq在线客服代码



249 992 331



特效描述:jQuery 页面右侧浮动 在线留言客服 qq在线客服,

代码结构

1. 引入CSS

<link href="css/online.css" rel="stylesheet" type="text/css" />

2. 引入JS

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

3. HTML代码

<div id="onService_panel">
	<div class="onService_panel_s">
		<div class="online_boxs">
			<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
			<div class="boxs_m_l">
				<div class="boxs_m_r">
					<div class="box_m_m">
						<div id="onlineList">
							<em class="online_close" id="onlineClose" title="关闭"></em>
							<div class="online_open" id="onlineOpen"></div>
							<div id="online_tel_icon" class="online_icon">
								<span class="pic"><img src="images/online_tel.png" /></span>
								<span class="name">电话直呼</span>
							</div>
							<div id="online_qq_icon" class="online_icon">
								<span class="pic"><img src="images/online_qq.png" /></span>
								<span class="name">在线客服</span>
							</div>
							<div id="online_message_icon" class="online_icon">
								<span class="pic"><img src="images/online_message.png" /></span>
								<span class="name">在线留言</span>
							</div>
							<div id="online_email_icon" class="online_icon">
								<span class="pic"><a href="mailto:1234567@qq.com"><img src="images/online_email.png" /></a></span>
								<span class="name">发送邮件</span>
							</div>
							<div id="online_address_icon" class="online_icon">
								<span class="pic"><a href="http://www.dijiuzhanzhang.com/"><img src="images/online_address.png" /></a></span>
								<span class="name">企业地标</span>
							</div>
							<div id="onlineTelTab" class="online_tab">
								<div class="online_boxs">
									<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
									<div class="boxs_m_l">
										<div class="boxs_m_r">
											<div class="box_m_m">
												<div id="onlineTel" class="online_tab_c">
													<small class="sanjiao"></small>
													<small class="tab_close"></small>
													<dl>
														<dt><strong>联系我们:</strong></dt>
														<dd><strong>联系人:</strong><span>王宝强</span></dd>
														<dd><strong>电话:</strong><span>13000130005</span></dd>
													</dl>
												</div>
											</div>
										</div>
									</div>
									<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
								</div>
							</div>
							<div id="onlineQQTab" class="online_tab">
								<div class="online_boxs">
									<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
									<div class="boxs_m_l">
										<div class="boxs_m_r">
											<div class="box_m_m">
												<div id="onlineQQ" class="online_tab_c">
													<small class="sanjiao"></small>
													<small class="tab_close"></small>
													<dl>
														<dt>经理 </dt>
														<dd> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1234567&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1234567:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </dd>
														<dt>销售 </dt>
														<dd> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1234567&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1234567:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </dd>
													</dl>
												</div>
											</div>
										</div>
									</div>
									<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
								</div>
							</div>
							<div id="onlineMessageTab" class="online_tab">
								<div class="online_boxs">
									<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
									<div class="boxs_m_l">
										<div class="boxs_m_r">
											<div class="box_m_m">
												<div id="onlineMessage" class="online_tab_c">
													<small class="sanjiao"></small>
													<small class="tab_close"></small>
													<dl>
														<dt><textarea onfocus="h_con()" onblur="s_con()" name="content2" id="content2" onkeyup="checkLen(this,200)"></textarea></dt>
														<dd class="text_length">还可输入字符<b>200</b>(限制字符200)</dd>
														<dd>
															<label>您的姓名:</label>
															<input type="text" class="text_input" name="name" id="name"  maxlength="20" />
														</dd>
														<dd>
															<label>您的邮箱:</label>
															<input type="text" class="text_input" name="e_mail" id="e_mail" maxlength="50" />
														</dd>
														<dd>
															<label>您的电话:</label>
															<input type="text" class="text_input" name="tel" id="tel" maxlength="30"/>
															<input type="button" class="submitBut" value="提交" onclick="sub_check(446632)" />
														</dd>
													</dl>
												</div>
											</div>
										</div>
									</div>
									<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
		</div>
	</div>
</div><!--onService_panel end-->



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


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 qq在线客服 右键菜单 收缩导航菜单 图片头像上传 图片广告 在线客服插件 文字提示框 文字收缩展开 文件上传 对联广告 提示框/弹出层 图片收缩展开 文本框 layer 下拉框 叠加浮动层 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 悬浮浮动漂浮 弹出层拖动 窗口提示框 收缩收起展开 浮动提示框 切换按钮 在线客服咨询 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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