您好,登录后才能下订单哦!
这篇文章主要介绍“jQuery怎么实现整屏滚动功能”,在日常操作中,相信很多人在jQuery怎么实现整屏滚动功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jQuery怎么实现整屏滚动功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
1.jQuery.mousewheel插件使用
jQuery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jQuery的滚轮事件插件
jQuery.mousewheel.js
2.函数节流
JavaScript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。
例子:整屏滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚轮事件</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../jQuery库/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS3/wheelstyle.css">
<script type="text/javascript">
/*$(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) }) }) </script>
</head>
<body>
<div class="pages_con"> <div class="pages"> <div class="main_con"> <div class="left_img"> <img src="../images/1.png" alt="boy&girl"> </div> <div class="right_info">日常里,与你相抱</div> </div> </div> <div class="pages page2"> <div class="main_con"> <div class="left_img"> <img src="../images/2.png" alt="樱花美"> </div> <div class="right_info">樱花下,是你的小提琴</div> </div> </div> <div class="pages page3"> <div class="main_con"> <div class="left_img"> <img src="../images/3.png" alt="星空"> </div> <div class="right_info">星空下,你我偶遇</div> </div> </div> <div class="pages page4"> <div class="main_con"> <div class="left_img"> <img src="../images/4.png" alt="黄昏美"> </div> <div class="right_info">黄昏时,一人独奏</div> </div> </div> <div class="pages page5"> <div class="main_con"> <div class="left_img"> <img src="../images/5.png" alt="樱花帅"> </div> <div class="right_info">琴声中,樱花飘扬</div> </div> </div> <ul class="points"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
</body>
</html>
CSS文件:
/ CSS Document /
body,ul{
margin: 0; /取消列表和系统自带缩进/
padding: 0;
}
ul{
list-style: none;
}
/父级div/
.pages_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/每一页面/
.pages{
height: 768px;
position: relative;
}
/小圆点ul/
.points{
width: 16px;
height: 176px;
position: fixed;
right: 20px;
top: 50%;
margin-top: -88px;
}
/每一个小圆点/
.points li{
width: 13px; height: 13px; border-radius: 50%; margin: 16px 0; border: 1px solid #666; cursor: pointer;
}
/jQuery操作类/
.points .active{
background-color: #666666;
}
/页面大小/
.main_con{
width: 1366px; height: 768px; position: relative;
}
/页面的图片/
.main_con .left_img{
position: relative;
left: -40px;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/页面的文字/
.main_con .right_info{
width: 40px;
height: 300px;
position: absolute;
left: -50px;
top: 50%;
margin-top: -150px;
font-size: 30px;
color: #666666;
text-align: justify;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/jQuery操作动画/
.moving .main_con .left_img{
left: 0;
opacity: 1;
filter: alpha(opacity=100);}
.moving .main_con .right_info{
left: 30px;
opacity: 1;
filter: alpha(opacity=100);}
到此,关于“jQuery怎么实现整屏滚动功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。