js实现整屏滑动效果

最新推荐文章于 2024-06-30 15:38:14 发布

君子-如兰

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量6.3k

点赞数 2

文章标签： javascript 前端开发 pc

本文链接：https://blog.csdn.net/ltmtianming/article/details/78936491

版权

js实现整屏滑动效果在开发PC端的时候，还是会遇到的，淘宝上面就有这样的一个效果。这里是简单的实现。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

ul, ol {
list-style: none;
}

html, body, ul, ul li {
width: 100%;
height: 100%;
}

ol {
position: fixed;
top: 50px;
left: 50px;
}

ol li {
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>

<script>
var timer = null;
//var leader = 0;

var ol = document.getElementsByTagName("ol")[0];
var olLis = ol.children;
var ul = document.getElementsByTagName("ul")[0];
var ulLis = ul.children;

var arr = ["red", "orange", "yellow", "green", "blue"];
for (var i = 0; i < arr.length; i++) {
olLis[i].style.backgroundColor = arr[i];
ulLis[i].style.backgroundColor = arr[i];
}

/*window.onscroll = function () {
leader = window.pageYOffset;//当前页面被卷去的头部
};*/

//给所有的olLis注册点击事件
for (var j = 0; j < olLis.length; j++) {
olLis[j].index = j;
olLis[j].onclick = function () {
//让窗体滚动到指定位置
//就是要滚动到要去的ul 的 offsetTop的值
//当前点击的是ol中的哪个li 就去到ul中的那个li
var target = ulLis[this.index].offsetTop;
//window.scrollTo(0, target);
//一个渐渐变化的值，引入计时器
clearInterval(timer);
timer = setInterval(function () {
//step = (target - leader) / 10
//leader = leader + step
var leader = window.pageYOffset;//当前页面被卷去的头部
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
//console.log(leader);
window.scrollTo(0, leader);
if (leader === target) {
clearInterval(timer);
}
}, 20);
};
}
</script>
</body>
</html>