jQuery jQuery鼠标混轮滚动事件

最新推荐文章于 2024-07-30 03:35:30 发布

郭庆汝

最新推荐文章于 2024-07-30 03:35:30 发布

阅读量2.5k

点赞数 1

文章标签： jQuery 鼠标滚轮事件 CSS动画屏幕滚动 class属性

本文链接：https://blog.csdn.net/guoqingru0311/article/details/120174991

版权

jQuery鼠标换轮滚动事件

1、鼠标混轮滚动事件
2、添加class属性
3、实现屏幕滚动效果
- css代码部分
- html与javascript部分

在这里插入图片描述

1、鼠标混轮滚动事件

在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery整屏滚动事件</title>
    <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">

        // 鼠标滑轮滚动事件
        var i=0;
        $(window).mousewheel(function (event,dat) {
            console.log(dat)
        })

    </script>
</head>
<body>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

2、添加class属性

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery整屏滚动事件</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 50px auto 0;
            transition: all 1s ease;
        }
        .moving{
            transform: rotate(135deg);
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.box').click(function () {
                $(this).addClass('moving')
            })
        });

    </script>
</head>
<body>

    <div class="box"></div>
</body>
</html>

显示效果如下：
在这里插入图片描述

3、实现屏幕滚动效果

css代码部分

body{
    margin: 0;
    padding: 0;
}

ul{list-style: none}

.pages_con{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    overflow-y: scroll;
}

.pagees{
    height: 600px;
    position: relative;
    background-color: pink;
}

.page1{	background-color:orange;}
.page2{	background-color:lightgreen;}
.page3{	background-color:cyan;}
.page4{	background-color:pink;}
.page5{	background-color:lightblue;}

.points{
    width: 16px;
    height: 176px;
    position: fixed;
    top: 50%;
    right:20px;
    margin-top: -88px;
}

.points li{
    width: 13px;
    height: 13px;
    margin: 16px 0;
    border-radius: 50%;
    border: 1px solid #666;
    cursor: pointer;
}

.points li.activate {
    background-color: #666;
}

.main_con{
    width: 900px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -450px;
    margin-top: -200px;
}

.main_con .left_img{
    width: 363px;
    height: 400px;
    float: left;
    left: -50px;
    opacity: 0;
    filter:alpha(opacity=0);        /*兼容ie浏览器*/
    transition: all 1000ms ease 300ms;
}

.main_con .right_info{
    width: 500px;
    height: 300px;
    margin-top:50px;
    float:right;
    font-family:'Microsoft Yahei';
    font-size: 20px;
    line-height: 50px;
    color: #666;
    text-indent:2em;
    text-align: justify;
    position:relative;
    bottom:-50px;
    opacity:0;
	filter:alpha(opacity=0);
	transition:all 1000ms ease 300ms;
}

.moving .main_con .left_img{
	left:0;
	opacity:1;
	filter:alpha(opacity=100);
}

.moving .main_con .right_info{
	right:0;
	opacity:1;
	filter:alpha(opacity=100);
}

.main_con .right_img{
	width:522px;
	height:400px;
	float:right;
	position:relative;
	top:-50px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:all 1000ms ease 300ms;
}

.main_con .left_info{
	width:350px;
	height:300px;
	margin-top:50px;
	float:left;
	font-family:'Microsoft Yahei';
	font-size:20px;
	line-height:50px;
	color:#666;
	text-indent:2em;
	text-align:justify;         /*实现两端对齐文本效果。*/
	position:relative;
	bottom:-50px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:all 1000ms ease 300ms;
}

.moving .main_con .right_img{
	top:0;
	opacity:1;
	filter:alpha(opacity=100);
}

.moving .main_con .left_info{
	bottom:0;
	opacity:1;
	filter:alpha(opacity=100);
}

.main_con .center_img{
	width:611px;
	height:337px;
	position:absolute;
	left:50%;
	margin-left:-305px;
	bottom:-50px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:all 1000ms ease 300ms;

}


.moving .main_con .center_img
{
	bottom:0;
	opacity:1;
	filter:alpha(opacity=100);
}

html与javascript部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>jquery整屏滚动具体实现</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <link rel="stylesheet" type="text/css" href="css/gqr.css">
    <script type="text/javascript">
        $(function () {
            var $pagees = $('.pagees');
            var $screen = $('.pages_con');
            var $points = $('.points li');      // 获取页面中小黑点对象
            var $len=$pagees.length;
            var timer=null;     // 设置定时器全局变量
            $pagees.eq(0).addClass('moving')        // 默认显示第一个页面

            // 获取浏览器的高度，并将高度设置成 .pagees元素的高度
            var $h = $(window).height();
            $pagees.css({'height':$h});

            var $nowscreen=0;   // 记录当前屏幕的高度

            // 点击某个小圆点，屏幕放在对应的页面上
            $points.click(function () {
                var index = $(this).index();        // 获取当前li对应的索引
                $screen.animate({'top':-index*$h});        /*实现滚动动画*/
                $pagees.eq(index).addClass('moving').siblings().removeClass('moving')       /*在当前屏上加上moving属性*/
                $points.eq(index).addClass('activate').siblings().removeClass('activate')     /*给当前页小圆点添加激活效果*/
            })


            $(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':-$nowscreen*$h});        /*实现滚动动画*/

                $pagees.eq($nowscreen).addClass('moving').siblings().removeClass('moving')       /*在当前屏上加上moving属性*/
                $points.eq($nowscreen).addClass('activate').siblings().removeClass('activate')     /*给当前页小圆点添加激活效果*/

                document.title=$nowscreen
                },300)

            })

        })

    </script>
</head>
<body>
    <div class="pages_con">

        <div class="pagees page1">
            <div class="main_con">
                <div class="left_img"><img src="./images/001.png" alt=""></div>
                <div class="right_info">
                    Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，
                    网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

                </div>
            </div>
        </div>
        <div class="pagees page2">
            <div class="main_con">
                <div class="right_img"><img src="./images/002.png" alt=""></div>
                <div class="left_info">
                    2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。
                    网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

                </div>
            </div>
        </div>

        <div class="pagees page3">
            <div class="main_con">
                <div class="left_img"><img src="./images/003.png" alt=""></div>
                <div class="right_info">
                    以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，
                    还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
                </div>
            </div>
        </div>


        <div class="pagees page4">
            <div class="main_con">
                <div class="left_img"><img src="./images/004.png" alt=""></div>
                <div class="right_info">
                    Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。
                    Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                </div>
            </div>
        </div>


        <div class="pagees page5">
            <div class="main_con">
                <div class="center_img"><img src="./images/005.png" alt=""></div>
            </div>
        </div>

    </div>
    <ul class="points">
        <li class="activate"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>
</html>