最近进行网站的二次开发,其中有一个在线客服插件,要修改一下,之前是点击显示隐藏,要改成鼠标移入移出显示隐藏。
HTML部分代码:
<div class="service_qq" style="right: -175px;">
<div id="rightArrow" style="background-position: -50px 0px;"><a href="javascript:;" title="客服"></a></div>
<div id="floatDivBoxs">
<div class="floatDtt">联系客服</div>
<div class="floatShadow">
<ul class="floatDqq">
<li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1209278955&Site=sc.chinaz.com&Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服1</a></li>
<li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=203666169&Site=sc.chinaz.com&Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服2</a></li>
<li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=207320252&Site=sc.chinaz.com&Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服3</a></li>
<li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1909723148&Site=sc.chinaz.com&Menu=yes"><img src="img/qq.png" align="absmiddle">前端客服4</a></li>
</ul>
<div class="floatDtxt">咨询热线</div>
<div class="floatDtel">000-00000000</div>
<div style="text-align:center;padding:10PX 0 5px 0;background:#EBEBEB;"><img src="img/wap_ico.jpg"><br>二维码</div>
</div>
<div class="floatDbg"></div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/qq.js"></script>
</div>
CSS部分代码:
*{padding:0;margin:0;}
html,body{font-size:12px;font-family:"微软雅黑";outline:none;color:#666;background:#fff;}
ul,ol{list-style:none;}
img{border:none;outline:none;}
a{color:#666;text-decoration:none;outline:none;}
a:hover{color:#e8431f;}
/*浮动客服*/
.service_qq{position: fixed;top: 180px;right: 0;padding-left: 50px}
#floatDivBoxs{width:170px;background:#fff;z-index:999;}
#floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-size:18px;text-indent:22px;position:relative;}
#floatDivBoxs .floatDqq{padding:0 14px;}
#floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3; padding:0 0 0 50px;}
#floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;}
#floatDivBoxs .floatDtel{padding:0 0 15px 10px;}
#floatDivBoxs .floatDtel img{display:block;}
#floatDivBoxs .floatDbg{width:100%;height:20px;background:url(../img/online_botbg.jpg) no-repeat;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}
.floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}
#rightArrow{width:50px;height:45px;background:url(../img/online_arrow.jpg) no-repeat; position: absolute;left: 0;z-index:999;}
#rightArrow a{display:block;height:45px;}
js 部分代码:
$(function () {
$(".service_qq").animate({right: '-175px'}, 300);
$("#rightArrow").css('background-position', '-50px 0');
$(".service_qq").mouseenter(function () {
$(".service_qq").animate({right: '0'}, 300);
$("#rightArrow").css('background-position', '0px 0');
});
$('#floatDivBoxs').mouseleave(function () {
$(".service_qq").animate({right: '-175px'}, 300);
$("#rightArrow").css('background-position', '-50px 0');
});
})
效果如下:
源码下载:点击下载
其中遇到了 mouse 事件的问题,可以参照:JQuery几个mouse事件的区别和用法