鼠标滚轮
window.onmousewheel=function(){};
基本描述
1、我们使用插件fullpage，为了更好的兼容性
2、动画效果是在滚动到这一屏时触发的，此时给当前屏幕加current类，其他的移除current类
3、动画的效果的过渡状态是必须在移除current类的时候移除，在添加current类的时候添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .first.current h3 { /*过渡 入场需要过渡 ，出场快速..*/ transition: all 1s; transform: translateX(200px) translateY(200px); } </style> </head> <body> <div id="dowebok"> <div class="section first"> <h3>第一屏</h3> </div> <div class="section second"> <h3>第二屏</h3> </div> <div class="section third"> <h3>第三屏</h3> </div> <div class="section four"> <h3>第四屏</h3> </div> <div class="section five"> <h3>第五屏</h3> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> //调用全屏的方法 $(function () { $('#dowebok').fullpage({ //设置每一屏幕的颜色 sectionsColor: ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'], //loopTop:true, // 滚到某一屏之后调用 afterLoad: function (link, index) { // index 当前section的编号 // current类加给谁 谁就做动画 $('.section').removeClass('current'); // 让动画 延迟执行100ms setTimeout(function () { $('.section').eq(index - 1).addClass('current'); }, 100); } }); }); </script> </body> </html>
网址：http://www.dowebok.com/77.html