溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“jQuery怎么實現整屏滾動功能”，在日常操作中，相信很多人在jQuery怎么實現整屏滾動功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery怎么實現整屏滾動功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1.jQuery.mousewheel插件使用
jQuery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可以使用jQuery的滾輪事件插件
jQuery.mousewheel.js
2.函數節流
JavaScript中有些事件的觸發頻率非常高，比如onresize事件（jq中是resize），onmousemove事件（jq中是mousemove）以及上面說的鼠標滾輪事件，在短事件內多處觸發執行綁定的函數，可以巧妙地使用定時器來減少觸發的次數，實現函數節流。
例子：整屏滾動
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滾輪事件</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../jQuery庫/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS3/wheelstyle.css">
<script type="text/javascript">
/*$(window).mousewheel(function(event,data){
鼠標滾輪向上1，向下-1
alert(data);
console.log(data);*/
/*})*/
$(function(){
var $screen = $('.pages_con'); /*獲取整個父級div*/
var $pages = $('.pages'); /*獲取頁面div*/
var $h = $(window).height(); /*視窗的高度*/
//alert($h);
var $nowscreen = 0; /*刷新次數變量*/
var $len = $pages.length; /*有多少個頁面div*/
var $points = $('.points li'); /*獲取li*/
var timer = null; /*定時變量為空值*/
$pages.css({'height':$h}); /*修改頁面樣式，高度設為可視窗口大小*/
$points.click(function(){ /*點擊li即小圓點，執行*/
$nowscreen = $(this).index(); /*刷新次數變量=點擊的數值*/
/*第幾個li,增加active類，同輩的li刪除active類*/
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
/*父級div樣式top值，等于負的可視屏幕大小*刷新數*/
$screen.animate({'top':-$h*$nowscreen});
//document.title=$nowscreen;
/*頁面div的第幾個，增加moving類，同輩的div刪除moving類*/
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
})
/*鼠標滾輪函數，事件變量event，滾輪次數dat*/
$(window).mousewheel(function(event,dat){
/*沒執行一次清空timer變量，重新計算*/
clearTimeout(timer);
/*定時器函數*/
timer = setTimeout(function(){
/*向下滾*/
if(dat==-1){
$nowscreen++;
}
/*向上滾*/
else{
$nowscreen--;
}
/*最頂部限定0*/
if($nowscreen<0){
$nowscreen=0;
}
/*最底部限定4，0-4*/
if($nowscreen>$len-1){
$nowscreen = $len-1
}
$screen.animate({'top':-$h*$nowscreen});
//document.title=$nowscreen;
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
},200)
})
})
</script></head>
<body>
<div class="pages_con"> <div class="pages"> <div class="main_con"> <div class="left_img"> <img src="../images/1.png" alt="boy&girl"> </div> <div class="right_info">日常里，與你相抱</div> </div> </div> <div class="pages page2"> <div class="main_con"> <div class="left_img"> <img src="../images/2.png" alt="櫻花美"> </div> <div class="right_info">櫻花下，是你的小提琴</div> </div> </div> <div class="pages page3"> <div class="main_con"> <div class="left_img"> <img src="../images/3.png" alt="星空"> </div> <div class="right_info">星空下，你我偶遇</div> </div> </div> <div class="pages page4"> <div class="main_con"> <div class="left_img"> <img src="../images/4.png" alt="黃昏美"> </div> <div class="right_info">黃昏時，一人獨奏</div> </div> </div> <div class="pages page5"> <div class="main_con"> <div class="left_img"> <img src="../images/5.png" alt="櫻花帥"> </div> <div class="right_info">琴聲中，櫻花飄揚</div> </div> </div> <ul class="points"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
</body>
</html>
CSS文件：
/ CSS Document /
body,ul{
margin: 0; /取消列表和系統自帶縮進/
padding: 0;
}
ul{
list-style: none;
}
/父級div/
.pages_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/每一頁面/
.pages{
height: 768px;
position: relative;
}
/小圓點ul/
.points{
width: 16px;
height: 176px;
position: fixed;
right: 20px;
top: 50%;
margin-top: -88px;
}
/每一個小圓點/
.points li{
width: 13px; height: 13px; border-radius: 50%; margin: 16px 0; border: 1px solid #666; cursor: pointer;
}
/jQuery操作類/
.points .active{
background-color: #666666;
}
/頁面大小/
.main_con{
width: 1366px; height: 768px; position: relative;
}
/頁面的圖片/
.main_con .left_img{
position: relative;
left: -40px;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/頁面的文字/
.main_con .right_info{
width: 40px;
height: 300px;
position: absolute;
left: -50px;
top: 50%;
margin-top: -150px;
font-size: 30px;
color: #666666;
text-align: justify;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/jQuery操作動畫/
.moving .main_con .left_img{
left: 0;
opacity: 1;
filter: alpha(opacity=100);}
.moving .main_con .right_info{
left: 30px;
opacity: 1;
filter: alpha(opacity=100);}
到此，關于“jQuery怎么實現整屏滾動功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
