变速运动实例(二)[通俗易懂]

变速运动实例(二)[通俗易懂]变速运动实例(二)(1)右下角区块初始位置处于右下角。当页面滚动时,区块位置会随之滑动,并且最终停止在右下角位置。(2)滑块处于浏览器右边视角中部,当页面滚动时,最终停止滚动时滑块也会滚动到中部。<!doctypehtml><html><head><title>运动</title><…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

变速运动实例(二)
(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>

Jetbrains全家桶1年46,售后保障稳定

问题

(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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/213617.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【Spark Streaming】Spark Streaming的使用

    【Spark Streaming】Spark Streaming的使用一、SparkStreaming引入集群监控一般的大型集群和平台,都需要对其进行监控的需求。要针对各种数据库,包括MySQL,HBase等进行监控要针对应用进行监控,例如Tomcat,Nginx,Node.js等要针对硬件的一些指标进行监控,例如CPU,内存,磁盘等SparkStreaming介绍官网:http://spark.apac…

  • 通配符掩码计算「建议收藏」

    通配符掩码计算「建议收藏」一,通配符掩码1.通配符掩码的用途和结构①用途通配符掩码(wildcard-mask)路由器使用的通配符掩码与源或目标地址一起来分辨匹配的地址范围,它与子网掩码不同。它不像子网掩码告诉路由器IP地址的哪一位属于网络号一样,通配符掩码告诉路由器为了判断出匹配,它需要检查IP地址中的多少位。②结构通配符掩码中,0表示要检查的位,1表示不需要检查的位通配符掩码中,可以用255.255.255…

  • lcd像素点密度_常见液晶显示分辨率对应像素密度[通俗易懂]

    lcd像素点密度_常见液晶显示分辨率对应像素密度[通俗易懂]液晶屏尺寸主流屏幕分辨率屏幕像素密度(PPI)产品类型800×4803英寸:3113.5英寸:2664英寸:233960×6403.5英寸:3294英寸:2884.3英寸:2681280×7204.3英寸:3414.7英寸:3125英寸:2931920×10805英寸:4407英寸:3142048x1080_2K6英寸:3857英寸:3301280×8007英寸:2158英寸…

  • MATLAB plotyy总结「建议收藏」

    MATLAB plotyy总结「建议收藏」当需要画出2个两个不同纵坐标的图时,此时的横坐标的图是相同的,在MATLAB中这个函数叫plotyy下面列举的是一个简单的画plotyy的应用几种不同的调用格式1、plotyy(X1,Y1,X2,Y2)2、plotyy(X1,Y1,X2,Y2,function)3、plotyy(X1,Y1,X2,Y2,’function1′,’function2′)4、[AX,H1,H2]=plotyy(___)5、plotyy(AX1,___)1、plotyy(X1,Y1,X2,Y2)直接简单地画

  • 使用canvas实现擦玻璃效果

    体验效果:http://hovertree.com/texiao/html5/25/效果图:代码如下:关注微信公众号何问起,账号ihewenqi,或者微信扫描下面二维码关注。然后发送&quot

    2021年12月22日
  • codeblocks怎么设置中文[通俗易懂]

    codeblocks怎么设置中文[通俗易懂]1下载语言包local2将语言包解压后放进新的位置codeblocks里面share的位置例如E:\新建文件夹\codeblocks\CodeBlocks\share\CodeBlocks然后进入codeblocks点击导航条的setting然后点击第二的大图标(视图)在里面选择长条框里选择中文就可以了。重启一下语言包的资源:https://pan.baidu.com/s/1SXYKt…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号