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



232 927 310



特效描述: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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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