一款用于捕獲各種滾動事件的插件?Waypoints。同時(shí)Waypoints還支持固定元素和無限滾動的功能，功力十分強(qiáng)大。
一、最簡易的使用
<!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)試器,看控制臺信息 }); }); //注：無論是鼠標(biā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>二、能檢測鼠標(biāo)滾動方向的基本應(yīng)用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>檢測鼠標(biāo)滾動方向</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)時(shí)所執(zhí)行的代碼，是一個匿名函數(shù)即可 { offset:‘50%‘ }//第２個參數(shù)為偏移量,本例即該div到窗口高度一半時(shí)觸發(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>三、鼠標(biāo)滾動加動畫效果的應(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 () { //獲取運(yùn)動的盒子 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">這是標(biāo)題</div> <div class="lt"> <div class="lt_left boxaction">這是左邊盒子</div> <div class="lt_right boxaction">這是右邊盒子</div> </div> </div></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
