大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
<!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>
问题
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>
转载于:https://www.cnblogs.com/f6056/p/9394372.html
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/213617.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...