首页 前端知识 JS特效第121弹:jQuery蓝色网页右侧栏悬浮在线客服代码

JS特效第121弹:jQuery蓝色网页右侧栏悬浮在线客服代码

2024-04-01 10:04:27 前端知识 前端哥 179 788 我要收藏

         jQuery蓝色网页右侧栏悬浮在线客服代码,先来看看效果:

        一部分关键的代码如下:

<!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>

<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />

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

</head>
<body><script src="/demos/googlegg.js"></script>

<div class="container"></div>

<!-- 客服部分 -->
<div style="right:-230px;" class="contactusdiyou">
	<div class="hoverbtn">
		<span>联</span><span>系</span><span>我</span><span>们</span>
		<img class="hoverimg" src="images/hoverbtnbg.gif" height="9" width="13">
	</div>
	<div class="conter">
		<div class="con1"> 
			<dl class="fn_cle">
				<dt><img src="images/tel.png" height="31" width="31"></dt>
				<dd class="f1">咨询热线:</dd>
				<dd class="f2"><span class="ph_num">188-9999-8888</span></dd>
			</dl>
		</div> 
		<div class="blank0"></div>
		<div class="qqcall"> 
			<dl class="fn_cle">
				<dt><img src="images/zxkfqq.png" height="31" width="31"></dt>
				<dd class="f1 f_s14">在线客服:</dd>
				<dd class="f2 kefuQQ">
					<span>客服一</span>
					<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1111111111&amp;site=qq&amp;menu=yes"></a>
					<span>客服二</span>
					<a target="_blank" href="#"></a>
				</dd>
			</dl>
			<div class="blank0"></div>           
		</div> 
		<div class="blank0"></div>
		<div class="weixincall"> 
			<dl class="fn_cle">
				<dt><img src="images/weixin.png" height="31" width="31"></dt>
				<dd class="f1">官方微信站:</dd>
				<dd class="f3"><img src="images/wechat_code.png" height="73" width="73"></dd>
			</dl>
		</div> 
		<div class="blank0"></div>
		<div class="dytimer">
			<span style="font-weight: bold;">公司官网:</span>
			<span><a href="">www.sucaihuo.com</a></span>
		</div>
	</div>
</div>

<div class="diyoumask" ></div>

<script type="text/javascript">
$(function() {
	$(".contactusdiyou").hover(function() {
		$(".hoverimg").attr("src","images/hoverbtnbg1.gif");
		$('.diyoumask').fadeIn();
		$('.contactusdiyou').animate({right:'0'},300); 
	}, function() {
		$(".hoverimg").attr("src","images/hoverbtnbg.gif");
		$('.contactusdiyou').animate({right:'-230px'},300,function(){});
		$('.diyoumask').fadeOut();
	});
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

        全部代码:jQuery蓝色网页右侧栏悬浮在线客服代码

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4394.html
标签
评论
发布的文章

前端vue实现甘特图

2024-04-19 21:04:35

HTML入门(详细)

2024-04-19 21:04:24

HTML 入门手册(一)

2024-04-19 21:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!