一款用于捕獲各種滾動事件的插件?Waypoints。同時Waypoints還支持固定元素和無限滾動的功能，功力十分強大。
一、最簡易的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>waypoints的最簡單使用</title> <!-- 定義css樣式 --> <style> *{ padding: 0; margin: 0; } #example-basic{ height: 500px; text-align: center; } </style> <!-- 引入js文件 --> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.waypoints.js"></script> <script src="js/jquery-ui.min.js"></script> <!-- 啟動waypoints --> <script> $(function () { $(‘#example-basic‘).waypoint(function() { console.log("hi,example-basic,你的頂部碰到了瀏覽器窗口的頂部！");//測試打開web調(diào)試器,看控制臺信息 }); }); //注：無論是鼠標向上或向下只要該元素的頂部碰到瀏覽器的頂部都會觸發(fā)waypoints事件 </script></head><body> <div style="background:#ccc;height:1800px;">one div</div> <div id="example-basic">example-basic.</div> <div style="background:#ccc;height:1800px;">one div</div></html>二、能檢測鼠標滾動方向的基本應(yīng)用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>檢測鼠標滾動方向</title> <style> *{ padding: 0; margin: 0; } #example-basic{ height: 500px; text-align: center; } .in{ font-size: 36px; color: #ff0; background:red; transition:all 0.5s; } </style> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.waypoints.js"></script> <script src="js/jquery-ui.min.js"></script> <script> $(function () { $(‘#example-basic‘).waypoint( function(direction){ if(direction=="down"){ $(‘#example-basic‘).addClass("in"); $(‘#example-basic‘).html("你在向下滾動!") }else{ $(‘#example-basic‘).removeClass("in"); $(‘#example-basic‘).html("你在向上滾動!") } },//第１個參數(shù)為waypoints事件響應(yīng)時所執(zhí)行的代碼，是一個匿名函數(shù)即可 { offset:‘50%‘ }//第２個參數(shù)為偏移量,本例即該div到窗口高度一半時觸發(fā) ); }); </script></head><body> <div style="background:#ccc;height:1800px;">one div</div> <div id="example-basic">example-basic.</div> <div style="background:#ccc;height:1800px;">one div</div></html>三、鼠標滾動加動畫效果的應(yīng)用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>加下動畫效果的</title> <style> *{ padding: 0; margin: 0; } div{ background: #eee; } .banner{ width: 1100px; margin: 0 auto; } .title{ height: 100px; background: #9f9; } .lt{ position: relative; height: 400px; border:1px dotted #999; } .lt_left{ position: absolute; width: 500px; height: 300px; left: -20%; top: 0; margin-left: -550px; background: #f99; } .lt_right{ position: absolute; width: 500px; height: 300px; left: 120%; top: 0; margin-left: 50px; background: #99f; } </style> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.waypoints.js"></script> <script src="js/jquery-ui.min.js"></script> <script> $(function () { //獲取運動的盒子 var boxElemets = $(‘.boxaction‘); $.each(boxElemets, function() { $(this).attr(‘init‘, ‘false‘); }); //判斷是否出現(xiàn)在瀏覽器界面里面！ function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; if (elemTop + 50 < docViewBottom) { return true } else { return false } } //定義動畫 function animateInit() { $.each(boxElemets, function() { if ($(this).attr(‘init‘) == ‘false‘ && isScrolledIntoView($(this))) { //沒有顯示過且剛出現(xiàn)在瀏覽器界面 $(this).attr(‘init‘, ‘true‘); $(this).animate({ ‘left‘: ‘50%‘ }, 1000, ‘easeOutCubic‘); } }); } animateInit(); //先執(zhí)行一次animateInit $(window).scroll(function() { //滑動執(zhí)行animateInit animateInit(); }); }) </script></head><body> <div style="background:#ccc;height:1800px;text-align:center;">top div</div> <div class="banner"> <div class="title">這是標題</div> <div class="lt"> <div class="lt_left boxaction">這是左邊盒子</div> <div class="lt_right boxaction">這是右邊盒子</div> </div> </div></body></html>總結(jié)
以上所述是小編給大家介紹的JS庫之Waypoints的用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
