免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

jQuery怎么實(shí)現(xiàn)整屏滾動(dòng)功能

這篇文章主要介紹“jQuery怎么實(shí)現(xiàn)整屏滾動(dòng)功能”，在日常操作中，相信很多人在jQuery怎么實(shí)現(xiàn)整屏滾動(dòng)功能問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”jQuery怎么實(shí)現(xiàn)整屏滾動(dòng)功能”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供奉新網(wǎng)站建設(shè)、奉新做網(wǎng)站、奉新網(wǎng)站設(shè)計(jì)、奉新網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、奉新企業(yè)網(wǎng)站模板建站服務(wù)，十余年奉新做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1.jQuery.mousewheel插件使用

jQuery中沒(méi)有鼠標(biāo)滾輪事件，原生js中的鼠標(biāo)滾輪事件不兼容，可以使用jQuery的滾輪事件插件
jQuery.mousewheel.js

2.函數(shù)節(jié)流

JavaScript中有些事件的觸發(fā)頻率非常高，比如onresize事件（jq中是resize），onmousemove事件（jq中是mousemove）以及上面說(shuō)的鼠標(biāo)滾輪事件，在短事件內(nèi)多處觸發(fā)執(zhí)行綁定的函數(shù)，可以巧妙地使用定時(shí)器來(lái)減少觸發(fā)的次數(shù)，實(shí)現(xiàn)函數(shù)節(jié)流。

例子：整屏滾動(dòng)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滾輪事件</title>
<script type="text/javascript" src="../jQuery庫(kù)/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../jQuery庫(kù)/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS3/wheelstyle.css">
<script type="text/javascript">

/*$(window).mousewheel(function(event,data){
    鼠標(biāo)滾輪向上1，向下-1
    alert(data);

    console.log(data);*/

/*})*/
$(function(){
    var $screen = $('.pages_con'); /*獲取整個(gè)父級(jí)div*/
    var $pages = $('.pages');      /*獲取頁(yè)面div*/
    var $h = $(window).height();   /*視窗的高度*/
    //alert($h);
    var $nowscreen = 0;             /*刷新次數(shù)變量*/
    var $len = $pages.length;       /*有多少個(gè)頁(yè)面div*/
    var $points = $('.points li');  /*獲取li*/
    var timer = null;               /*定時(shí)變量為空值*/

    $pages.css({'height':$h});      /*修改頁(yè)面樣式，高度設(shè)為可視窗口大小*/

    $points.click(function(){       /*點(diǎn)擊li即小圓點(diǎn)，執(zhí)行*/
        $nowscreen = $(this).index();  /*刷新次數(shù)變量=點(diǎn)擊的數(shù)值*/

        /*第幾個(gè)li,增加active類，同輩的li刪除active類*/
        $points.eq($nowscreen).addClass('active').siblings().removeClass('active');

        /*父級(jí)div樣式top值，等于負(fù)的可視屏幕大小*刷新數(shù)*/
        $screen.animate({'top':-$h*$nowscreen});
        //document.title=$nowscreen;

        /*頁(yè)面div的第幾個(gè)，增加moving類，同輩的div刪除moving類*/
        $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
    })

    /*鼠標(biāo)滾輪函數(shù)，事件變量event，滾輪次數(shù)dat*/
    $(window).mousewheel(function(event,dat){

        /*沒(méi)執(zhí)行一次清空timer變量，重新計(jì)算*/
        clearTimeout(timer);

        /*定時(shí)器函數(shù)*/
        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">黃昏時(shí)，一人獨(dú)奏</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">琴聲中，櫻花飄揚(yáng)</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;  /取消列表和系統(tǒng)自帶縮進(jìn)/
padding: 0;
}
ul{
list-style: none;
}
/父級(jí)div/
.pages_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/每一頁(yè)面/
.pages{
height: 768px;
position: relative;
}
/小圓點(diǎn)ul/
.points{
width: 16px;
height: 176px;
position: fixed;
right: 20px;
top: 50%;
margin-top: -88px;
}
/每一個(gè)小圓點(diǎn)/
.points li{

width: 13px;
height: 13px;
border-radius: 50%;
margin: 16px 0;
border: 1px solid #666;
cursor: pointer;

}
/jQuery操作類/
.points .active{
background-color: #666666;
}
/頁(yè)面大小/
.main_con{

width: 1366px;
height: 768px;
position: relative;

}

/頁(yè)面的圖片/
.main_con .left_img{
position: relative;
left: -40px;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/頁(yè)面的文字/
.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操作動(dòng)畫(huà)/
.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);

}

到此，關(guān)于“jQuery怎么實(shí)現(xiàn)整屏滾動(dòng)功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

分享名稱：jQuery怎么實(shí)現(xiàn)整屏滾動(dòng)功能
分享網(wǎng)址：http://m.newbst.com/article28/jesdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、小程序開(kāi)發(fā)、云服務(wù)器、自適應(yīng)網(wǎng)站、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作