qq悬浮窗简单代码分享！

最新推荐文章于 2024-03-30 03:01:08 发布

酱江奖

最新推荐文章于 2024-03-30 03:01:08 发布

阅读量3k

点赞数 1

文章标签：代码 qq html java

本文链接：https://blog.csdn.net/Pro_jhf/article/details/49023421

版权

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="jhf" content="text">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>qq 悬浮窗</title>
  <style type="text/css">
		*{
			margin:0px;
			
		}
		#qq{
			width:158px;
			height:220px;
			background:white;
			position:fixed;
			top:200px;
			right:20px;
			overflow:hidden;
		}
		#qq .qq_show{
			width:158px;
			height:220px;
			position:relative;
		}
		#qq .qq_show .con{
			width:100%;
			height:162px;
			background:url("images/bg.jpg");
			text-align:center;
			margin-top:0px;
			position:absolute;
			top:18px;
			padding-top:10px; 
		}
		#qq .qq_show .con img{
			width:105px;
			height:105px;
		}
		#qq .qq_show .con p{
			
			height:30px;
			width:140px;
			margin:0px auto;
			color:white;
			font-size:12px;
			line-height:30px; 
			border-bottom:1px solid #DF5685;
		}
		#qq .qq_show .con p img{
			width:20px;
			height:22px;
		}
		#qq .qq_show .con p a{
			text-decoration:none;
			color:white;
		}
		#qq .qq_show .c{
			width:100%;
			height:31px;
			position:absolute;
			bottom:1px;
		}
		#qq img.close{
			position:absolute;
			top: 20px;
			right:-33px;
		}
  </style>
 </head>
 <body>
	<div id="qq">
		<div class="qq_show">
			<img src="images/top.png"/>
				<div class="con">
					<img src="images/ewm.jpg"/>
					<p>
					<!--qq图片-->
						<img src="images/qq.jpg" align="absmiddle"/>   <!--设置图片居中-->
						<a href="http://www.baidu.com">  call me:442342240</a>
					</p>
				</div>
				<div class="c">
				<!--底部图片将用于点击-->
					<img src="images/bot.png" />
				</div>
		</div>
		<!--qq隐藏显示-->
		<img src="images/small.png" class="close"/ >
		
	</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$("#qq .qq_show .c").click(function(){
			$("#qq .qq_show").animate({right:"-158px"},500,function(){
					$(".close").animate({right:"3px"},500);
				});
		});
		$(".close").click(function(){
			$(".close").animate({right:"-33px"},500,function(){
					$(".qq_show").animate({right:"0px"},500);
				});
		});
	</script>  
 </body>
</html>

结果如下，

仅供参考！素材如下！

酱江奖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
qq悬浮窗简单代码分享！

qq 悬浮窗 *{ margin:0px; } #qq{ width:158px; height:220px; background:white; position:fixed; top:200px; right:20px; overflow:hidden; } #qq .qq_show{ width:158p
复制链接

扫一扫