在线客户框的制作
项目场景：
在线客服制作：
通过在版心的右边缘设置一个悬浮框，通过过渡动画来展示
制作思路：
第一步：先定位整体框架，做好布局
第二步：做精灵图控制每个鼠标移动的背景图效果
第三步：做细节展示动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 900px;
height: 600px;
background: #0c0;
margin: 0 auto;
}
#kf {
width: 50px;
height: 200px;
background: #f00;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: 450px;
}
#kf a {
display: block;
width: 50px;
height: 50px;
background: url(image/kefu.jpg) no-repeat;
position: relative;
}
#kf a:nth-child(2) {
background-position-y: -50px;
}
#kf a:nth-child(3) {
background-position-y: -100px;
}
#kf a:nth-child(4) {
background-position-y: -150px;
}
#kf a span{
display: inline-block;
width: 0px; /*设置动画效果，鼠标移动时候显示宽度*/
height: 50px;
background: #007BF9;
position: absolute;
right:50px; /*偏移父元素的宽度*/
line-height: 50px;
text-align: center;
color: #fff;
overflow: hidden;
transition: all .4s;
}
</style>
</head>
<body>
需求：在版心的右边缘设置一个悬浮框，通过过渡动画来展示
<div class="container"></div>
<!--在线客服-->
<p>第一步：先定位整体框架，做好布局
<br>第二步：做精灵图控制位置
<br>第三步：做细节展示动画</p>
<div id="kf">
<a href="#">
<span>在线咨询</span>
</a>
<a href="#">
<span>11111111111</span>
</a>
<a href="#">
<span>联系我们</span>
</a>
<a href="#" id="to_top">
<span>回到顶部</span>
</a>
</div>
<script>
//控制鼠标移动效果
var tu = document.querySelectorAll('#kf a');
tu.forEach((v) => {
v.onmouseover = function () {
v.style.backgroundPositionX = '-50px'; //鼠标移动时，背景图向左偏移
v.children[0].style.width='150px'; //鼠标移动时候显示宽度
}
v.onmouseout = function () {
v.style.backgroundPositionX = '0px'; //鼠标移动时，背景图不偏移
v.children[0].style.width='0px'; //鼠标移动时候显示宽度为0
}
});
//回到顶部操作：
var toTOP=document.querySelector('#to_top');
toTOP.addEventListener('click',()=>{
var y=window.scrollY;
var timelong=setInterval( ()=>{
y-=150;
console.log(y);
window.scrollTo(0,y);
if(y<=0){
clearInterval(timelong);
}
},180)
});
</script>
</body>
</html>
</font>
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">