在线客服功能
1、css样式
/* 设置盒子以中心点向右移动超出版心 */
#kefu {
width: 50px;
height: 200px;
position: fixed;
top: 50%;
margin: -100px 0 0 610px;
left: 50%;
}
/* 设置所有的a标签,导入背景图,背景图统一位置是左上角第一张 */
#kefu a {
display: block;
width: 50px;
height: 50px;
background: url(kefu.jpg) no-repeat;
position: relative;
}
/* 第一个a标签y轴不动(因为本身就在对应的位置),设置第二、三、四个y轴分别移动到对应的位置 */
#kefu a:nth-child(2) {
background-position: 0 -50px;
}
#kefu a:nth-child(3) {
background-position: 0px -100px;
}
#kefu a:nth-child(4) {
background-position: 0 -150px;
}
/* 统一把a标签x轴向左移动50px,这里为-50px */
#kefu a:hover {
background-position-x: -50px;
}
#kefu a span {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #007BF9;
color: #fff;
position: absolute;
left: 0px;
display: none;
/* 设置过度动画,宽度设置为0超出部分隐藏 */
width: 0px;
transition: all 1s;
overflow: hidden;
display: inline-block;
}
2、html
<div id="kefu">
<a href="#">
<span>在线咨询</span>
</a>
<a href="#">
<span>13212341234</span>
</a>
<a href="#">
<span>微信</span>
</a>
<a href="#">
<span>返回顶部</span>
</a>
</div>
3、js
// 获取到所有的a标签赋值给a
var a = document.querySelectorAll('#kefu a');
// 遍历a标签,得到每一个a
a.forEach((v) => {
// 鼠标移入的时候触发函数(onmouseover移入)
v.onmouseover = function() {
// this代表每次循环出来的a值(v),v寻找下面的子节点(寻找children),下标为0,更改属性设置为显示
// this.children[0].style.display = 'block';
// 鼠标移动上去宽度设置成0,向左边支出,
v.children[0].style.width = '150px';
v.children[0].style.left = '-150px';
}
// onmouseout移出效果设置为隐藏
v.onmouseout = function() {
// this.children[0].style.display = 'none';
// 隐藏这里就直接设置为0
v.children[0].style.width = '0px';
v.children[0].style.left = '0px';
}
});