jQuery怎么实现整屏滚动功能
这篇文章主要介绍“jQuery怎么实现整屏滚动功能”,在日常操作中,相信很多人在jQuery怎么实现整屏滚动功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jQuery怎么实现整屏滚动功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联专业为企业提供奉新网站建设、奉新做网站、奉新网站设计、奉新网站制作等企业网站建设、网页设计与制作、奉新企业网站模板建站服务,十余年奉新做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
1.jQuery.mousewheel插件使用
jQuery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jQuery的滚轮事件插件
jQuery.mousewheel.js
2.函数节流
JavaScript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。
例子:整屏滚动
滚轮事件
/*$(window).mousewheel(function(event,data){ 鼠标滚轮向上1,向下-1 alert(data); console.log(data);*/ /*})*/ $(function(){ var $screen = $('.pages_con'); /*获取整个父级div*/ var $pages = $('.pages'); /*获取页面div*/ var $h = $(window).height(); /*视窗的高度*/ //alert($h); var $nowscreen = 0; /*刷新次数变量*/ var $len = $pages.length; /*有多少个页面div*/ var $points = $('.points li'); /*获取li*/ var timer = null; /*定时变量为空值*/ $pages.css({'height':$h}); /*修改页面样式,高度设为可视窗口大小*/ $points.click(function(){ /*点击li即小圆点,执行*/ $nowscreen = $(this).index(); /*刷新次数变量=点击的数值*/ /*第几个li,增加active类,同辈的li删除active类*/ $points.eq($nowscreen).addClass('active').siblings().removeClass('active'); /*父级div样式top值,等于负的可视屏幕大小*刷新数*/ $screen.animate({'top':-$h*$nowscreen}); //document.title=$nowscreen; /*页面div的第几个,增加moving类,同辈的div删除moving类*/ $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving'); }) /*鼠标滚轮函数,事件变量event,滚轮次数dat*/ $(window).mousewheel(function(event,dat){ /*没执行一次清空timer变量,重新计算*/ clearTimeout(timer); /*定时器函数*/ timer = setTimeout(function(){ /*向下滚*/ if(dat==-1){ $nowscreen++; } /*向上滚*/ else{ $nowscreen--; } /*最顶部限定0*/ if($nowscreen<0){ $nowscreen=0; } /*最底部限定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) }) })![]()