JavaScript 元素的滑动效果（一）

最新推荐文章于 2024-07-22 17:43:07 发布

①个程序员

最新推荐文章于 2024-07-22 17:43:07 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/zhh0310235/article/details/101209855

版权

元素的滑动效果其实就是元素的位置或元素的宽度发生变化，只是变化宽度特别块，超过人眼的刷新频率而已。

人眼的刷新频率是：

通常条件下，人眼的识别连贯图像的速度是24帧/秒，也就是1000毫秒/24帧，大约为40ms（毫秒）。达到或者超过这个速度的连贯图像，观看时就不会形成卡顿的感觉。形成这个现象的原因是因为人眼观看影像时，会产生视觉延迟导致的。所以说，我们经常说人眼的视觉延迟感应速度为>=40ms。

<body>
<div id="wai">

<div id="left" style=" width:200px;"></div>
<div id="right" style=" width:800px;"></div>
<div id="btn" style="left:175px;"></div>
</div>
</body>
<script type="text/javascript">
//给“btn”加点击事件，点击移动（每隔一定时间移动1px）
var btn = document.getElementById("btn");
btn.onclick = function(){
window.setInterval("yidong()",10);
}
//定义移动方法：
function yidong(){
var left = document.getElementById("left");
var right = document.getElementById("right");
var btn = document.getElementById("btn");

var lw = parseInt(left.style.width);
var rw = parseInt(right.style.width);
var bl = parseInt(btn.style.left);

var clear;
if(lw<800){ //当“left”的宽度到800时，停止继续+1，clearInterval
lw++;
rw--;
bl++;
}else{
//window.clearInterval(clear);
}

left.style.width = lw+"px";
right.style.width = rw+"px";
btn.style.left = bl+"px";

}
</script>