滑动滚轮实现页面切换,效果图如下,使用css3的动画效果实现页面的动态载入
涉及的知识点
1. jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。
2. 函数节流
javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。
代码如下,缺少了css3的外部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整页滚动</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();//获取浏览器页面默认高度
var len = $('.pages').length;
var $points = $('.points li');//选上滚动点并赋值给变量
var $pages = $('.pages');
var nowscreen = 0;
var timer = null; //设定一个定时器,消除用力滚动滑轮划多屏的效果
$pages.eq(0).addClass('moving');
$('.pages').css({height:$h});//把滚动页面的高度设为页面默认高度
//mousewheel插件设定dat的值:-1是向下滑动,1是向上滑动,
$(window).mousewheel(function(event,dat){
//清掉前面刚刚开的定时器:在200毫秒之内如果多次滚动,前面的都会清掉,只保留最后一个滚动
clearTimeout(timer);
// 最新的一次定时器,200毫秒内的最后一个滚动才会触发下面的事件,setInterval是反复执行,setTimeout执行一次
timer = setTimeout(function(){
if(dat==-1)
{
nowscreen++;
//本例只有5屏,所以nowscreen区间为0-4,nowscreen自加大于4时,赋值为4,不再往下滑
if(nowscreen>len-1){
nowscreen=len-1;
}
}
else
{
nowscreen--;
if(nowscreen<0){
nowscreen=0;
}
}
//向上滚屏时为负数,也就是-$h*nowscreen,300毫秒是延迟滚动,增强视觉体验
$('.pages_con').animate({top:-$h*nowscreen},300);
//这里表示当选上某屏时,就把li加上active属性,并且同时去掉其他li的acive属性
$points.eq(nowscreen).addClass('active').siblings().removeClass('active');
//给每一屏加动画效果,200毫秒是定时器的设定
$pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
},200);
})
//实现点击页面右边的列表点也能到相应页面屏的效果
$points.click(function(){
//实现跳到指定屏
$(this).addClass('active').siblings().removeClass('active');
$('.pages_con').animate({top:-$h*$(this).index()},300);
//指定屏加动画
$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前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。
</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">
2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。
</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">
以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。
</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">
Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。
</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">//这个是屏幕右边的滑动点列表
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>