马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 小黄练编程 于 2022-4-16 22:20 编辑 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.topback{
position:fixed;
bottom:50%;
right:0;
background-color:green;
}
.topback .toppback {
position:absolute;
top:0;
left:0;
width:160px;
height:50px;
text-align:left;
line-height:50px;
background-color:green;
z-index:-1;
}
.topback i{
display:inline-block;
width:50px;
height:50px;
text-align:center;
line-height:50px;
background-color:green;
cursor:pointer;
}
</style>
</head>
<body>
<div class="topback">
<span><a href="#"><i></i></a></span>
<div class="toppback"><a href="#">返回顶部</a></div>
</div>
<script src="/js/index.js"></script>
<script>
function animate( obj, target, callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(target-obj.offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
if(obj.offsetLeft>=target){
clearInterval(obj.timer);
if(callback){
callback();
}
}
obj.style.left=obj.offsetLeft+step+'px';
},30);
}
var topback=document.querySelector('.topback');
var toppback=document.querySelector('.toppback');
topback.addEventListener('mouseenter',function(){
animate(toppback,-140);
});
</script>
</body>
</html>
offsetLeft 偏移量初始为 0，之后递减为 -140，在递减过程 始终大于你的 target = -140 导致 一直满足 if 条件，进入 if 代码卡后定时器被取消 之后又 回调所以不正常
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2022-4-16 22:18:58
置顶卡
千斤顶
显身卡
发表于 2022-4-16 22:35:13
楼主