您好,登錄后才能下訂單哦!
一款用于捕獲各種滾動事件的插件?Waypoints。同時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 >one div</div> <div id="example-basic">example-basic.</div> <div >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("你在向上滾動!") } },//第1個參數(shù)為waypoints事件響應(yīng)時所執(zhí)行的代碼,是一個匿名函數(shù)即可 { offset:‘50%‘ }//第2個參數(shù)為偏移量,本例即該div到窗口高度一半時觸發(fā) ); }); </script> </head> <body> <div >one div</div> <div id="example-basic">example-basic.</div> <div >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 >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>
總結(jié)
以上所述是小編給大家介紹的JS庫之Waypoints的用法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。