图片来自于阿里巴巴矢量图库
sidebar.css
.sidebar {
position: fixed;
right: 0;
top: 50%;
margin-top: -100px;
z-index: 20;
}
a{
color: #000;
}
a:hover{
color: aqua;
}
.sidebar_ul {
padding: 7px;
box-shadow: 0 2px 10px 0 rgba(135, 135, 135, 0.3)
}
.sidebar_ul li {
list-style: none;
width: 48px;
padding-top: 34px;
padding-bottom: 4px;
border-bottom: 1px #ececec solid;
font-size: 12px;
color: #000;
position: relative;
box-sizing: border-box;
text-align: center;
cursor: pointer;
transition: all 0.2s
}
.sidebar_ul li .icon {
display: block;
/* background: #FFF url("../img/common/sidebar.png") 0 0 no-repeat; */
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 4px
}
.sidebar_ul .ewm {
position: absolute;
left: -130px;
top: -50px;
width: 200px;
height: 200px;
pointer-events: none;
opacity: 0;
background-size: 184px;
}
.sidebar_ul .ewm .img {
position: absolute;
left: 22px;
top: 19px;
background-color: #fff;
width: 124px;
height: 124px;
}
.sidebar_ul .ewm img {
position: absolute;
left: 2px;
top: 2px;
display: inline-block;
width: 120px;
height: 120px;
}
index.html
<div class="sidebar">
<ul class="sidebar_ul ">
<li class="js_sidebar qq">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=318667376&site=qq&menu=yes">
<em class="icon"><img src="images/QQ.png" width="30" height="30"></em>QQ咨询
</a>
</li>
<li class="js_sidebar dianhua">
<a target="_blank" href="tel:123456789" class="call">
<em class="icon"><img src="images/电话.png" width="30" height="30"></em>电话咨询
</a>
</li>
<li class="js_sidebar gzh">
<a target="_blank" href="#">
<em class="icon"><img src="images/微信.png" width="30" height="30"></em>公众号
</a>
<div class="ewm">
<span class="img"><img src="images/捕获.PNG" width="60" height="60" alt="微信二维码"></span>
</div>
</li>
<li class="js_sidebar email">
<a target="_blank" href="#">
<em class="icon"><img src="images/邮箱.png" width="30" height="30"></em>邮箱
</a>
</li>
</ul>
</div>
js
$(".js_sidebar").hover(function () {
$(this).find(".ewm").stop(true).animate({
opacity: 1,
left: "-180px"
}, 0);
}, function () {
$(this).find(".ewm").stop(true).animate({
opacity: 0,
left: "-180px"
}, 0);
});
效果图