溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一款用于捕獲各種滾動事件的插件?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調試器,看控制臺信息
});
});
//注：無論是鼠標向上或向下只要該元素的頂部碰到瀏覽器的頂部都會觸發waypoints事件
</script>
</head>
<body>
<div >one div</div>
<div id="example-basic">example-basic.</div>
<div >one div</div>
</html>
二、能檢測鼠標滾動方向的基本應用
<!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("你在向上滾動!")
}
},//第１個參數為waypoints事件響應時所執行的代碼，是一個匿名函數即可
{
offset:‘50%‘
}//第２個參數為偏移量,本例即該div到窗口高度一半時觸發
);
});
</script>
</head>
<body>
<div >one div</div>
<div id="example-basic">example-basic.</div>
<div >one div</div>
</html>
三、鼠標滾動加動畫效果的應用
<!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‘);
});
//判斷是否出現在瀏覽器界面里面！
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))) { //沒有顯示過且剛出現在瀏覽器界面
$(this).attr(‘init‘, ‘true‘);
$(this).animate({
‘left‘: ‘50%‘
}, 1000, ‘easeOutCubic‘);
}
});
}
animateInit(); //先執行一次animateInit
$(window).scroll(function() { //滑動執行animateInit
animateInit();
});
})
</script>
</head>
<body>
<div >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>
總結
以上所述是小編給大家介紹的JS庫之Waypoints的用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
