jQuery full screen scrolling

1.jQuery.mousewheel plug-in

There is no mouse wheel event in jQuery, and the mouse wheel event in native js is not compatible. You can use jQuery's wheel event plug-in
jQuery.mousewheel.js

2. Function throttling

In JavaScript, some events are triggered very frequently, such as the onresize event (jq is resize), onmousemove event (jq is mousemove) and the mouse wheel event mentioned above. In short events, multiple functions are triggered to perform binding. You can use timers cleverly to reduce the number of triggers and achieve function throttling.

Example: full screen scrolling

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Roller event</title>
<script type="text/javascript" src="../jQuery library/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../jQuery library/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS3/wheelstyle.css">
<script type="text/javascript">

/*$(window).mousewheel(function(event,data){
    Mouse wheel up 1, Down-1
    alert(data);

    console.log(data);*/

/*})*/
$(function(){
    var $screen = $('.pages_con'); /*Get the entire parent div*/
    var $pages = $('.pages');      /*Get page div*/
    var $h = $(window).height();   /*Window height*/
    //alert($h);
    var $nowscreen = 0;             /*Refresh times variable*/
    var $len = $pages.length;       /*How many pages div*/
    var $points = $('.points li');  /*Get li*/
    var timer = null;               /*Timing variable is null*/

    $pages.css({'height':$h});      /*Change the page style and set the height to the visible window size*/

    $points.click(function(){       /*Click li, i.e. dot, to execute*/
        $nowscreen = $(this).index();  /*Refresh times variable = number of hits*/

        /*Add active class and delete active class for li of the same generation*/
        $points.eq($nowscreen).addClass('active').siblings().removeClass('active');

        /*Parent div style top value, equal to negative visual screen size * number of refreshes*/
        $screen.animate({'top':-$h*$nowscreen});
        //document.title=$nowscreen;

        /*Add moving class for page div, and delete moving class for peer div*/
        $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
    })

    /*Mouse wheel function, event variable event, wheel times dat*/
    $(window).mousewheel(function(event,dat){

        /*Empty timer variable once, recalculate*/
        clearTimeout(timer);

        /*Timer Functions */
        timer = setTimeout(function(){

            /*Roll down*/
            if(dat==-1){
            $nowscreen++;
        }
        /*Roll up*/
        else{
            $nowscreen--;
        }
        /*Top limit 0*/
        if($nowscreen<0){
            $nowscreen=0;
        }
        /*Bottom limit 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">Everyday, embrace you</div>
        </div>
    </div>
    <div class="pages page2">
        <div class="main_con">
            <div class="left_img">
                <img src="../images/2.png" alt="Sakura beauty">
            </div>
            <div class="right_info">Under the cherry blossom, it's your violin</div>
        </div>
    </div>
    <div class="pages page3">
        <div class="main_con">
            <div class="left_img">
                <img src="../images/3.png" alt="Starry sky">
            </div>
            <div class="right_info">Under the starry sky, I ran into you</div>
        </div>
    </div>
    <div class="pages page4">
        <div class="main_con">
            <div class="left_img">
                <img src="../images/4.png" alt="Twilight beauty">
            </div>
            <div class="right_info">Solo at dusk</div>
        </div>
    </div>
    <div class="pages page5">
        <div class="main_con">
            <div class="left_img">
                <img src="../images/5.png" alt="Cherry blossoms">
            </div>
            <div class="right_info">Cherry blossoms flutter in the sound of zither</div>
        </div>
    </div>
    <ul class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>

CSS file:

/ CSS Document /
body,ul{
margin: 0; / unlist and system own indent/
padding: 0;
}
ul{
list-style: none;
}
/ parent div/
.pages_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/Every page/
.pages{
height: 768px;
position: relative;
}
/Small dot ul/
.points{
width: 16px;
height: 176px;
position: fixed;
right: 20px;
top: 50%;
margin-top: -88px;
}
/Every little dot/
.points li{

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

}
/jQuery operation class/
.points .active{
background-color: #666666;
}
/Page size/
.main_con{

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

}

/Picture of page/
.main_con .left_img{
position: relative;
left: -40px;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/Page text/
.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 Operation animation/
.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);

}

Tags: Javascript JQuery css3

Posted on Mon, 02 Dec 2019 12:06:35 -0800 by avickers