变速运动实例（二）[通俗易懂]

全栈程序员-站长 • 2022年10月26日上午7:46 • 未分类 • 阅读 0

变速运动实例（二）

（1）右下角区块初始位置处于右下角。当页面滚动时，区块位置会随之滑动，并且最终停止在右下角位置。

（2）滑块处于浏览器右边视角中部，当页面滚动时，最终停止滚动时滑块也会滚动到中部。

<!doctype html>
<html>
<head>
<title>运动</title>
<meta charset="utf-8">
<style>
html{
     
     font-family:楷体;}
#div1{
     
     width:100px;height:150px;background:red;position:absolute;right:0;bottom:0;}

</style>
<script>
window.onscroll=function()
{
    var oDiv=document.getElementById('div1');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
}
var timer=null;
function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    clearInterval(timer);
    timer=setInterval(function(){
        var speed=(iTarget-oDiv.offsetTop)/4;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(oDiv.offsetTop==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.top=oDiv.offsetTop+speed+'px';
        }
    },30)
}
</script>
</head>
<body style='height:2000px;'>
<div id='div1'></div>
</body>
</html>

问题

（1）为什么当window.onscroll包含var timer=null;function startMove(iTarget){……}；的内容时，滑块会出现“疯狂”抖动现象。

（2）为什么var timer=null；写在函数 startMove(iTarget)内部时，滑块会出现“疯狂”抖动现象？

speed导致距离无法除尽，导致接近目标点滑块不断跳动的问题。

<!doctype html>
<html>
<head>
<title>运动</title>
<meta charset="utf-8">
<style>
html{
     
     font-family:楷体;}
#div1{
     
     width:100px;height:100px;background:red;left:600px;top:50px;position:absolute;}
#div2{
     
     width:1px;height:300px;background:black;left:300px;top:0px;position:absolute;}
#div3{
     
     width:1px;height:300px;background:black;left:100px;top:0px;position:absolute;}
</style>
<script>

var timer=null;
function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    clearInterval(timer);
    timer=setInterval(function(){
    
        var speed=0;
        if(oDiv.offsetLeft<iTarget)
        {
            speed=7;
        }
        else
        {
            speed=-7;
        }
        if(oDiv.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';    
        }
    },30);
}



</script>
</head>
<body style='height:2000px;'>
<input type='button' value='到100' onclick='startMove(100)'/>
<input type='button' value='到300' onclick='startMove(300)'/>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
</body>
</html>

document.documentElement.clientHeight-oDiv.offsetHeight)/2的值可能产生小数，会造成iTarget的值为小数，而oDiv.offsetTop的值只会出现整数，造成oDiv.offsetTop==iTarget不可能成立，oDiv.offsetTop的值只会大于iTarget或小于iTarget，导致抖动出现。需要parseInt()函数来取整。

原代码中：

if(oDiv.offsetLeft==iTarget)

{

clearInterval(timer);

}

需要优化判断机制，当接近目标点时，就认为已经到达，停止定时器并设置其left值为目标点。

if(Math.abs(iTarget-oDiv.offsetLeft)<=7)

{

clearInterval(timer);

oDiv.style.left=iTarget+’px’;

}

转载于:https://www.cnblogs.com/f6056/p/9394372.html

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/213617.html原文链接：https://javaforall.net

变速运动实例（二）[通俗易懂]

相关推荐

webpack打包优化面试_什么是webpack

数据库设计实战（一）：数据库设计规范「建议收藏」

python中的深拷贝和浅拷贝_python浅复制和深复制的区别

线段树详解 （原理，实现与应用）「建议收藏」

JS–JavaScript变量详解(全局变量、局部变量)

java语法正则表达式_详解Java正则表达式语法

发表回复

线段树详解（原理，实现与应用）「建议收藏」