qq悬浮窗简单代码分享！

来源：互联网发布：js语言精粹在线编辑：程序博客网时间：2024/04/30 03:09
<!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>
结果如下，
仅供参考！素材如下！
0 0