您的位置：首页 > 运维架构 > 网站架构

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

2016-04-09 10:47 369 查看

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

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)
})
})

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

标签： 悬浮二维码悬浮客服链接 jQuery js html

相关文章推荐

新的分享

章节导航