您的位置：首页 > Web前端 > HTML5

Html5 + Css3 制作QQ悬浮特效

2015-12-18 22:58 711 查看

1 QQ二维码图标右侧悬浮，可开可收

2 点击QQ在线咨询，可以弹出对方qq对话框

3 代码如下

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>QQ悬浮特效</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#qq
{
width:200px;
height:250px;
position:fixed;
top:100px;
right:10px;
}
#qq #showQQ
{
width:158px;
height:230px;
right:10px;
position:absolute;
}

#qq #showQQ .con
{
width:158px;
height:162px;
background:url("images/bg.jpg");
padding-top:10px;
}

#qq #showQQ .con img.ewm
{
margin:0px auto 0;

}
#qq #showQQ img.txt
{
display:block;//去掉图片间的空行
}
#qq #showQQ .con p
{
width:120px;
height:35px;
font-size:14px;
font-family:"微软雅黑";
color:#ffffff;
margin:10px auto 0px;
margin-left:20px;
line-height:35px;
border-bottom:1px solid #df5685;
letter-spacing:1px;
}

#qq #showQQ .con p a
{
text-decoration:none;
color:#ffffff;
}
#qq img.close
{
position:absolute;
top:0px;
right:-50px;

}
</style>
</head>
<body>
<div id="qq">
<div id="showQQ">
<img src="images/top.jpg" class="txt" />
<div class="con" >
<img width="105" height="105" class="txt ewm" src="images/ewm.jpg" />
<p>
<a href="http://wpa.qq.com/msgrd?v=3&uin=1530144568&site=qq&menu=yes" target="_blank">
<img src="images/qq.jpg" align="absmiddle"/> 在线QQ咨询
</a>
</p>
</div>
<img src="images/bot.jpg" class="txt" />
</div>
<img src="images/small.jpg" class="close" />
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("img.txt").click(function()
{
$("#showQQ").animate({right:"-170px"},300,function(){
$("img.close").animate({right:"0px"},500);});
});

$("img.close").click(function()
{
$("img.close").animate({right:"-50px"},300,function(){
$("#showQQ").animate({right:"0px"},500);});

});

</script>
</body>

</html>

4 效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航