名企动态网站开发--右侧悬浮二维码+QQ客服

最新推荐文章于 2024-08-10 03:24:28 发布

u013344815

最新推荐文章于 2024-08-10 03:24:28 发布

阅读量1.6k

点赞数 1

分类专栏： Java web 文章标签：悬浮二维码悬浮客服链接 jQuery js html

本文链接：https://blog.csdn.net/u013344815/article/details/51103609

版权

Java web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

有需要图片素材的请联系博主！

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--最外侧的div盒子 -->
		<div id="flow">
			<!--存放展开状态（大图）的div盒子 -->
		     <div class="show">
		     	<!--顶部图片 -->
		     	<img src="img/top.png" class="top"/>
		     	<!--中间部分 包括二维码和客服链接 -->
		        <div class='con'>
		        	<img src="img/ewm.jpg" class="pic"/>
		        	<!--a标签负责生成客服链接 -->
		        	<p>
		        		<a  href="http://wpa.qq.com/msgrd?v=3&uin=2446053738&site=qq&menu=yes" target="_blank">
		        		    <img src="img/qq.jpg" align="absmiddle"/> 在线客服咨询
		        		</a>
		        	</p>
		        </div>
		        <!--底部图片 -->
		        <img src="img/bot.png" class="bot"/>
		     </div>
		     <!--存放隐藏状态（小图）的div盒子 -->
		     <div class="hide">
		     	<img src="img/small.png"/>
		     </div>
		</div>
	</body>
</html>

css程序中特别需要注意的是行内元素（如下面涉及到的img）无法设置上下边距，也就是margin:0对其不起作用，所以需要将其设置为块级元素（display:block）

css文件

*{
	margin: 0;
}
img.top{
	display: block;
}
#flow{
	width: 158px;
	height: 230px;
	
	position: fixed;
	top:200px;
	right: 10px;
	overflow: hidden;
	
}
#flow .show{
	width: 158px;
	height: 230px;
	position: absolute;
	
	
}
#flow .show .con{
	width: 158px;
	height: 172px;
	background: url(../img/bg.jpg);
	
}
#flow .show .con .pic{
	width: 106px;

	padding-left: 26px;
	padding-top: 10px;

}
#flow .show .con p{
	
	width: 120px;
	height: 35px;
	line-height: 35px;
	border-bottom: 1px solid #df5685;
	margin: 10px auto 0;
    font-family:  "微软雅黑";
    font-size: 14px;
    color: white;
}
 a{
	text-decoration: none;
	color: white;
}
.hide{
	position: absolute;
	top: 0;
	right: -33px;
}

js文件（jQuery）

$(document).ready(function(){
	/*
	 * 定义展开状态时底部图片的点击事件
	 * 当点击底部图片时，大图移到屏幕外侧隐藏，小图从屏幕外侧移入
	 */
	$('.bot').click(function(){
		$('#flow .show').animate({
		     
		     	'right':-158
		    
		},500)
		
		$('#flow .hide').animate({
			    'right':0
		},1000)
		
	})
	/*
	 * 定义小图（也就是隐藏状态）的点击事件
	 * 点击后小图移除屏幕，回到原来位置
	 * 大图重新移进屏幕显示
	 */
	$('.hide').click(function(){
		$('#flow .hide').animate({'right':-33},500)
		$('#flow .show').animate({'right':0},1000)
	})
})