纯CSS实现侧边悬浮框 + 鼠标移入展示二维码效果，js调用sc
2019-08-05 本文已影响0人
小二黑儿
利用css属性 position : fixed; 来实现固定在窗口中某个位置（一般是左侧或右侧）。点击查看该属性具体详情
利用css属性 :hover 选择器，来控制相应元素的显示隐藏，实现展示二维码的显示隐藏。点击查看该属性具体详情
效果如图：
image
贴出源码：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>侧边悬浮窗demo</title>
<style>
.sidebar {
position : fixed;
z-index : 88;
right : 0;
bottom : 23%;
padding : 14px 12px 0;
box-shadow : 0 4px 38px 0 rgba(255, 96, 115, 0.2);
border-radius : 20px 0 0 20px;
background-color : #45ccbd;
}
.sidebar > div {
cursor : pointer;
text-align : center;
}
.sidebar > div img {
width : 40px;
}
.sidebar > div h3 {
font-size : 15px;
font-weight: 500;
color : #fff;
}
.sidebar > div .code {
display : none;
position : absolute;
z-index : 9;
top : 55%;
right : 90px;
border-radius : 8px;
box-shadow : 0 6px 12px 0 rgba(106, 115, 133, 0.22);
background-color : #ffffff;
}
.sidebar > div .code:after {
position : absolute;
top : 33%;
left : 100%;
content : '';
transform : translateY(-50%);
border-width : 5px;
border-style : solid;
border-color : transparent transparent transparent #ffffff;
}
.sidebar-wechat:hover .code {
display : block;
}
</style>
</head>
<body>
<aside class="sidebar">
<div>
<img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
alt="联系客服icon">
<h3>
在线客服
</h3>
</div>
<div>
<img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
alt="联系客服icon">
<h3>
APP下载
</h3>
</div>
<!------------------- 鼠标移入展示二维码 ---------------->
<div class="sidebar-wechat">
<img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
alt="联系客服icon">
<h3>
公众号
</h3>
<div class="code">
<img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
alt="联系客服icon">
</div>
</div>
<div onclick="toTop()">
<img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
alt="联系客服icon">
<h3>
回顶部
</h3>
</div>
</aside>
</body>
<script>
// 回到顶部效果使用js实现
function toTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</html>
