js中如何实现滚屏事件

Posted 2020-06-19 金甲

在前端工作中使用JS来实现整屏的上下滚动，下面是JS代码：

　　　　/****
	* 函数:判断滚轮滚动方向
	* 参数：event
	*返回： 方向 上 还是下
	***/
	var i =0;
	var $screen = $("#jq_banner");
	var len = $("#jq_banner ul li").length-1;
	var _h;
		_h = $screen.height();
	var init =function init(){
		_h = $screen.height();
		$screen.css({top:-(i*_h)});
	}//每一次滚动的高度 top值
	var scrollFunc = function(e){
		//滚轮 必须是一次事件结束之后才开启下一次事件
		//i++;
		//console.log(i);测试
		//console.log(e);
		if(!$screen.is(‘:animated‘)){ //不在执行动画的时候
			//滚轮的方向问题
			if(e.wheelDelta){
				//alert(e.wheelDelta);
				if(e.wheelDelta > 0){
					if(i==0) return;
						i--;
				}else{
					if(i==len) return;
						i++;
				}
			}
			$screen.animate({top:-(i*_h)},500);
		}
	}
	//执行滚轮
	document.onmousewheel = scrollFunc;
	//页面出现大小发生改变的时候，在一次加载
	window.onresize = init;
	//如果滚轮效果要去火狐下执行要加载一个插件jquery.mousewheel.js

　　

下面这是一个滚屏的插件的JS部分：

/*
* version:1.0
* Author:Star
* Company:TZ
* Plug Name:PageViewer
* Description:XXX
*/
(function($){
	$.fn.pageViewer = function(callback){
		this.callback = callback;
		init.call(this);//初始化函数 作用就是初始化html结构
		listener.call(this);//绑定滚轮事件，实现翻页
	}
	function init(){
		this.index = 0;
		this.addClass(‘ui-pageviewer‘);
		var $serial = $(‘<ul class="serial"></ul>‘);
		this.children(‘div‘).addClass(‘ui-page‘).each(function(){
			$serial.append($(‘<li><a></a></li>‘));
		});
		var $this = this;
		$serial.find(‘li‘).click(function(){
			$this.trigger(‘mousewheel‘,$(this).index());
		});
		this.$serial = $serial;
		this.maxIndex = $(‘div.ui-page‘,this).size()-1;
		this.append($serial);
	}
	function listener(){
		var $this = this;
		this.bind(‘mousewheel‘,function(event,index){
			if(typeof index!=‘number‘){
				var dir = event.originalEvent.wheelDelta;
				dir = dir>0?1:0;
				var idx = $this.index;
				if(dir){
					if(--idx<0){
						return;
					}
				}else{
					if(++idx>$this.maxIndex){
						return;
					}
				}
			}else{
				idx = index;
			}
			if(!$this.is(‘:animated‘)){
				$this.animate({‘top‘:‘-‘+idx+‘00%‘},1000,function(){
					$this.$serial.find(‘li‘).eq(idx).addClass(‘curr‘).siblings().removeClass(‘curr‘);
					$this.callback&&$this.callback(idx,$this.children(‘div‘).eq(idx));
				});
				$this.index = idx;
			}
		});
		$this.$serial.find(‘:first‘).addClass(‘curr‘);
		$this.callback&&$this.callback(0,$this.children(‘div‘).eq(0));
	}
})(jQuery);