网页特效之屏幕滑动

最新推荐文章于 2024-08-29 01:42:26 发布

原创

最新推荐文章于 2024-08-29 01:42:26 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#网页特效 #JavaScript #前端

效果：点击任意一个li选项，滑动到相对应的屏幕页面
思路：
布局：对于每个li铺满整个浏览器可视区域，必须让其父级宽高都为100%;
js: 使用for循环，对每一个li(属于ol盒子)点击时，使用定时器和window.scrollTo()方法实现内容滑动一个屏幕;
关键知识：index索引号的使用,定时器setInterval,scrollTo()
具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕滑动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,ol {
            list-style: none;
        }
        html,body,.box,ul,ul li{
            width: 100%;