Sliding the wheel to achieve page switching, the effect is as follows, using the animation effect of css3 to realize the dynamic loading of the page
The code is as follows, the external code of css3 is missing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full page scrolling</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
var $h = $(window).height();//Get the default height of the browser page
var len = $('.pages').length;
var $points = $('.points li');//Select the scroll point and assign it to the variable
var $pages = $('.pages');
var nowscreen = 0;
var timer = null; //Set a timer to eliminate the effect of rolling the pulley to multiple screens
$pages.eq(0).addClass('moving');
$('.pages').css({height:$h});//Set the height of the scrolling page to the default height of the page
//mousewheel plugin sets the value of dat: -1 is to slide down, 1 is to slide up,
$(window).mousewheel(function(event,dat){
//Clear the timer that was just started: If you scroll multiple times within 200 milliseconds, the previous ones will be cleared, and only the last scroll will be kept
clearTimeout(timer);
// The latest timer, the last scroll within 200 milliseconds will trigger the following event, setInterval is executed repeatedly, setTimeout is executed once
timer = setTimeout(function(){
if(dat==-1)
{
nowscreen++;
//There are only 5 screens in this example, so the range of nowscreen is 0-4. When the self-magnification of nowscreen is greater than 4, the value is 4 and no longer slides down.
if(nowscreen>len-1){
nowscreen = len-1;
}
}
else
{
nowscreen--;
if(nowscreen<0){
nowscreen=0;
}
}
// Negative number when scrolling up, that is -$h*nowscreen, 300 milliseconds is a delayed scroll to enhance the visual experience
$('.pages_con').animate({top:-$h*nowscreen},300);
//This means that when a screen is selected, add the active attribute to li, and remove the active attribute of other li at the same time
$points.eq(nowscreen).addClass('active').siblings().removeClass('active');
//Add animation effect to each screen, 200 milliseconds is the timer setting
$pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
},200);
})
// Realize the effect that clicking the list point on the right side of the page can also go to the corresponding page screen
$points.click(function(){
// Realize jump to the specified screen
$(this).addClass('active').siblings().removeClass('active');
$('.pages_con').animate({top:-$h*$(this).index()},300);
//Specify screen plus animation
$pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
})
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pages page1 moving">
<div class="main_con">
<div class="left_img"><img src="images/001.png"></div>
<div class="right_info">
Web front-end development has evolved from web page production, and the name has obvious characteristics of the times. In the evolution of the Internet, web page production is a product of the Web 1.0 era. At that time, the main content of the website was static, and the behavior of users using the website was mainly browsing.
</div>
</div>
</div>
<div class="pages page2">
<div class="main_con">
<div class="right_img"><img src="images/002.png"></div>
<div class="left_info">
After 2005, the Internet entered the Web 2.0 era, and various web applications similar to desktop software emerged in large numbers, and the front end of the website has undergone earth-shaking changes. Web pages are no longer just carrying a single text and picture. Various rich media make the content of the web page more vivid, and the software-based interactive form on the web page provides users with a better experience. These are all realized based on front-end technology.
</div>
</div>
</div>
<div class="pages page3">
<div class="main_con">
<div class="left_img"><img src="images/004.png"></div>
<div class="right_info">
In the past, Photoshop and Dreamweaver can make web pages, but now it is far from enough to master these. Regardless of the difficulty of development or the way of development, the current web page production is closer to the traditional website back-end development, so it is no longer called web page production, but web front-end development.
</div>
</div>
</div>
<div class="pages page4">
<div class="main_con">
<div class="left_img"><img src="images/003.png"></div>
<div class="right_info">
The role of web front-end development in product development is becoming more and more important, and professional front-end engineers are needed to do it well. Professionals in this area have been favored in recent years. Web front-end development is a very special job, covering a wide range of knowledge, both specific technologies and abstract concepts. Simply put, its main function is to better present the interface of the website to users.
</div>
</div>
</div>
<div class="pages page5">
<div class="main_con">
<div class="center_img"><img src="images/005.png"></div>
</div>
</div>
</div>
<ul class="points">//This is the list of sliding points on the right side of the screen
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>