- 鼠标滚动事件
```
```
- 全屏滚动可以使用第三方插件 fullpage 来制作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } h3 { width: 200px; height: 100px; background-color: red; transition: all 1s; transform: translateX(-1000px); } .section { overflow: hidden; } /* .section .current h3 这种选择器不行，需要写成 .section.current h3 */ .section.current h3 { transform: translateX(300px) translateY(200px); } </style> <script src="js/jquery.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> $(function () { $('#fullpage').fullpage({ // 每一屏的背景颜色 sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'], // 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 afterLoad: function (link, index) { console.log(index); // current 类加给谁，谁就做动画 $('.section').removeClass('current'); // 让动画延迟执行100ms setTimeout(() => { $('.section').eq(index - 1).addClass('current'); }, 100); } }); }); </script> </head> <body> <div id="fullpage"> <div class="section"><h3>第一屏</h3></div> <div class="section"><h3>第二屏</h3></div> <div class="section"> <div class="slide"><h3>第三屏的第一屏</h3></div> <div class="slide"><h3>第三屏的第二屏</h3></div> <div class="slide"><h3>第三屏的第三屏</h3></div> <div class="slide"><h3>第三屏的第四屏</h3></div> </div> <div class="section"><h3>第四屏</h3></div> </div> </body> </html>
- demo 效果：
