图片来自于阿里巴巴矢量图库 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); });效果图
