首页 > Web开发 > 详细

jQuery整屏滚动

时间:2019-01-12 17:47:51      阅读:45      评论:0      收藏:0      [点我收藏+]

标签:向上   head   absolute   获取   你我   tex   ngs   a13   rip   

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整屏滚动

标签:向上   head   absolute   获取   你我   tex   ngs   a13   rip   

原文:https://blog.51cto.com/13742773/2342007

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号