jquery 滚轮事件与函数节流

滚轮事件与函数节流

jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。

函数节流
javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。

<!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 $screen = $('.pages_con');
			var $pages = $('.pages');
			var $len = $pages.length;
			var $h = $(window).height();
			var $points = $('.points li');
			var timer = null;

			var $nowscreen = 0;
			$pages.css({'height':$h});
			$pages.eq(0).addClass('moving');


			$points.click(function(){
				$nowscreen = $(this).index();
				$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
				$screen.animate({'top':-$h*$nowscreen},300);
				$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
			})



			$(window).mousewheel(function(event,dat){
				// 函数节流
				clearTimeout(timer);
				timer = setTimeout(function(){

					if(dat==-1)
					{
						$nowscreen++;
					}
					else
					{
						$nowscreen--;
					}
					if($nowscreen<0)
					{
						$nowscreen=0;
					}

					if($nowscreen>$len-1)
					{
						$nowscreen=$len-1;
					}

					$screen.animate({'top':-$h*$nowscreen},300);
					$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 page1">
			<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>

jquery 滚轮事件与函数节流

jquery 滚轮事件与函数节流
jquery 滚轮事件与函数节流

上一篇:小程序开发笔记1


下一篇:如何在 Mac 上的 Pages 文稿中查找和替换文本?