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

变速运动实例(二)[通俗易懂]变速运动实例(二)(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)
blank

相关推荐

  • 最全企业安全网管工具名单查询_企业网络安全管理要求

    最全企业安全网管工具名单查询_企业网络安全管理要求我在一家医药公司做IT运维,老板喊我做一些企业智能化的工作。我就对这块做了些调研,所以知道哪些产品好用,哪些产品不好用,整理了份名单,分享给大家公司文档加密这块:翼火蛇免费3个点,其他按照15+3/月/终端收费,在做小白鼠实验云子可信-铁卷SaaS版目前是内测阶段,是我们公司目前在使用的,还不错,推荐这个!亿赛通收费标准未知,调研过,不好用,可能需要专业人员帮助员工机器管理的:瑞星安全云终…

  • 批处理for详解_python批处理

    批处理for详解_python批处理大纲一前言二for语句的基本用法三for/f(delims、tokens、skip、eol、userbackq、变量延迟)四for/r(递归遍历)五for/d(遍历目录)六for/l(计数循环) 一、前言在批处理中,for是最为强大的命令语句,它的出现,使得解析文本内容、遍历文件路径、数值递增/递减等操作成为可能;配合if、call、goto…

    2022年10月12日
  • hashtable与hashmap的区别_*p++和(*p)++的区别

    hashtable与hashmap的区别_*p++和(*p)++的区别一、HashMap简介   HashMap是基于哈希表实现的,每一个元素是一个key-value对,其内部通过单链表解决冲突问题,容量不足(超过了阀值)时,同样会自动增长。    HashMap是非线程安全的,只是用于单线程环境下,多线程环境下可以采用concurrent并发包下的concurrentHashMap。    HashMap 实现了Serializable接

  • ibm x201 怎么清理内部_ThinkPad X201拆解,联想Thinkpad X201拆机图解

    ibm x201 怎么清理内部_ThinkPad X201拆解,联想Thinkpad X201拆机图解1.jpg(25.79KB,下载次数:2552)2010-6-120:13上传ThinkPadX201掌托,没有防滚架,这个掌托就显得很软。电磁屏蔽做得很用心。2.jpg(39.16KB,下载次数:2556)2010-6-120:13上传ThinkPadX201掌托特写,可以看到掌托塑料件是MITSUBISHI(三菱)代工的,富士通高端笔记本的塑料件也由三菱代工,一句话…

  • ubuntu16.04安装MATLAB R2017b步骤详解(附完整文件包)「建议收藏」

    ubuntu16.04安装MATLAB R2017b步骤详解(附完整文件包)「建议收藏」摘要:介绍在ubuntu16.04中从下载到安装成功的完整步骤。本文给出MATLABR2017b(Linux系统)的完整安装包百度云盘下载地址,逐步介绍一种简单易行的安装方法,在桌面创建快捷方式,最终完整运行。

  • java集合系列——Map之HashMap介绍(八)

    HashMap是基于哈希表的Map实现的的,一个Key对应一个Value,允许使用null键和null值,不保证映射的顺序,特别是它不保证该顺序恒久不变!也不是同步的。

发表回复

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

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