鼠標滾輪
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