鼠标滚轮事件之支付宝案例

最新推荐文章于 2024-03-17 22:13:14 发布
最新推荐文章于 2024-03-17 22:13:14 发布
阅读量669 收藏
点赞数
分类专栏： jquery 文章标签： jquery 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Auyuer/article/details/76284202
版权

鼠标滚轮事件：onmousewheel
js e对象参数里
jQuery e的originalEvent里
主要实现效果：仿照支付宝效果，鼠标滚轮事件，当鼠标向下滚动时，整个页面元素依次以浏览器为单位向上移动，而当鼠标向下滚动时，整个页面元素又以浏览器为单位向下滚动。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{

            width: 100%;
            height: 100%;
            object-fit:cover;
            position:absolute;
           overflow:hidden;
        }
        *{
            padding:0px;
            margin:0px;
        }
        ul{
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
        }
        li{
            position:relative;
            list-style:none;
            height:100%;
            padding:0;
            overflow:hidden;
        }
        .box{
            position:absolute;
            bottom:40%;
            width:400px;
            left:35%;
            text-align:center;
        }
        .box button{
            width:150px;
            height:30px;
            background:transparent;
            border:1px solid white;
            border-radius:5px;
            margin-top:20px;
        }
        .box button:first-of-type{
            margin-right:95px;
        }
        .img_list{
            width:100%;
            display: block;
            max-width: 100%;
            height:100%;
        }
        .btn_play{
            position:absolute;
            right:-10%;
            top:50%;
            width:40px;
            height:40px;
            text-align:center;
            line-height:40px;
            border:1px white solid;
            border-radius:50%;
        }
        .imgList{
            position:absolute;
            z-index:2;
            transition:transform 1s linear,opacity 1s linear;
        }

        .imgList:first-of-type{
            left:10%;
            top:15%;
        }
        .imgList:nth-child(2){
            left:62%;
        }
        .imgList:nth-child(3){
            left:20%;
        }
        .imgList:nth-child(4){
            left:42%;
            bottom:0;
            overflow: hidden;
        }
        .imgList:nth-child(5){
            left:23%;
            top:30%;
            opacity:0;
        }
        .imgpay{
            position:absolute;
            transition:transform 1s linear,opacity 1s linear;
        }
        .imgpay:nth-child(1){
            left:-10%;
            top:-45%;
            z-index:2;
        }
        .imgpay:nth-child(2){
            left:30%;
            bottom:-50%;
        }
        .imgpay:nth-child(3){
            left:50%;
            top:30%;
            opacity:0;
        }
        .imgfan{
            position:absolute;
            left:15%;
            top:20%;
            z-index:2;
        }
        .imgfan1{
            transition:transform 1s linear;
        }
        .imgfont{
            position:absolute;
            right:25%;
            top:33%;
            opacity:0;
            z-index:2;
            transition:opacity 1s linear;
        }
        .imgfont1,.imgp1{
            transition:transform 1s linear;
        }
        .imgp{
            position:absolute;
            left:15%;
            top:30%;
            opacity:0;
            z-index:2;
            transition:opacity 2s linear;
        }

        .animate1{
            transform:translatex(200px);
        }
        .animate2{
            transform:translatex(28%) translatey(60%);
        }
        .animate3{
            transform:translatex(-9%) translatey(-5%);
        }
        .bigFont{
            transform:scale(1.1)
        }
    </style>
</head>
<body>
<ul class="ul_list">
    <li class="li_banner">
        <div class="box">
            <img src="7.26/image/4JdljnmTmX.png" alt=""/>
            <button>登录</button>
            <button>注册</button>
            <div class="btn_play">
                <img src="7.26/banner/btn_play.png">
            </div>
        </div>
        <img class="img_list" src="7.26/image/T1k5ReXXlkXXXXXXXX.jpg">
    </li>
    <li class="li_banner">
        <img class="imgList" src="7.26/image/4JdkvPL4wX.png" alt=""/>
        <img class="imgList" src="7.26/image/T10QFeXdlgXXXXXXXX.png" alt=""/>
        <img class="imgList" src="7.26/image/T19AteXc4xXXXXXXXX.png" alt=""/>
        <img class="imgList" src="7.26/image/T1GDtfXeRcXXXXXXXX.png"/>
        <img class="imgList" src="7.26/image/4JdlKWNmB3.png"/>
        <img class="img_list img_list2" src="7.26/image/T1yXVfXfddXXXXXXXX.jpg">
    </li>
    <li class="li_banner">
        <img class="imgpay" src="7.26/image/T1zABeXkxsXXXXXXXX.png" alt=""/>
        <img class="imgpay" src="7.26/image/T1PQteXadyXXXXXXXX.png" alt=""/>
        <img class="imgpay" src="7.26/image/T148deXkVlXXXXXXXX.png" alt=""/>
        <img class="img_list" src="7.26/image/4JdlRITPmX.jpg">
    </li>
    <li class="li_banner">
        <img class="imgfan" src="7.26/image/T14uXfXdBXXXXXXXXX.png" alt=""/>
        <img class="imgfan1 img_list" src="7.26/image/T1y3dfXfFlXXXXXXXX.jpg">
    </li>
    <li class="li_banner">
        <img class="imgfont" src="7.26/image/T1fCVfXg0hXXXXXXXX.png" alt=""/>
        <img class="imgfont1 img_list" src="7.26/image/4JdkvtFg7B.jpg">
    </li>
    <li class="li_banner">
        <img class="imgp" src="7.26/image/4OdnkirZ89.png" alt=""/>
        <img class="imgp1 img_list" src="7.26/image/4JdidBF3Kn.jpg" alt=""/>
    </li>
</ul>

<script src="7.26/jquery-3.0.0.js"></script>
<script type="text/javascript">
    var num=0;
    var isAnimate=false;
    $(function(){
        $(document).bind("mousewheel",function(event){
        //bind是事件的绑定(type,[data],fn)
            if(event.originalEvent.deltaY>0){ //向下滚动，元素向上
                if(isAnimate == false){
                //这里用isAnimate主要是为了保证一次划过一个页面
                    isAnimate = true;
                    num++;
                    if(num>5 ){
                        num=5;
                        isAnimate = false
                        return;
                    }
                    $(".ul_list").animate({
                        "marginTop":-num *parseInt($(".li_banner").css("height"))+"px"
                    },500,"linear",function(){
                    //图片中的相应动画
                        isAnimate =false;
                        if(num==0){
                            $(".imgList").eq(2).removeClass("animate1");
                            $(".imgList").eq(4).css("opacity",0).removeClass("bigFont")
                        }
                        else if(num == 1){
                            $(".imgList").eq(2).addClass("animate1");
                            $(".imgList").eq(4).css("opacity",1).addClass("bigFont")
                        }else if(num == 2){
                            $(".imgList").eq(2).removeClass("animate1");
                            $(".imgList").eq(4).css("opacity",0).removeClass("bigFont")

                            $(".imgpay").eq(0).addClass("animate2");
                            $(".imgpay").eq(1).addClass("animate3");
                            $(".imgpay").eq(2).css("opacity",1);
                        }else if(num ==3){
                            $(".imgpay").eq(0).removeClass("animate2");
                            $(".imgpay").eq(1).removeClass("animate3");
                            $(".imgpay").eq(2).css("opacity",0);

                            $(".imgfan1").eq(0).addClass("bigFont");
                        }else if(num == 4){
                            $(".imgfan1").eq(0).removeClass("bigFont");

                            $(".imgfont1").eq(0).addClass("bigFont");
                            $(".imgfont").eq(0).css("opacity",1)
                        }else if(num == 5){
                            $(".imgfont1").eq(0).removeClass("bigFont");
                            $(".imgfont").eq(0).css("opacity",0)

                            $(".imgp1").eq(0).addClass("bigFont");
                            $(".imgp").eq(0).css("opacity",1)
                        }
                    })
                }
            }else{
            //向上滚动，元素向下
                if(isAnimate == false){
                    isAnimate = true;
                    num--;
                    if(num<0){
                        num = 0;
                        isAnimate= false;
                        return;
                    }

                    $(".ul_list").animate({
                        "marginTop":-num * parseInt($(".li_banner").css("height"))+"px"
                    },500,"linear",function(){
                    //执行相应动画
                        isAnimate = false;
                        if(num==0){
                            $(".imgList").eq(2).removeClass("animate1");
                            $(".imgList").eq(4).css("opacity",0).removeClass("bigFont")
                        }
                            else if(num == 1){
                                $(".imgpay").eq(0).removeClass("animate2");
                                $(".imgpay").eq(1).removeClass("animate3");
                                $(".imgpay").eq(2).css("opacity",0);

                                $(".imgList").eq(2).addClass("animate1");
                                $(".imgList").eq(4).css("opacity",1).addClass("bigFont")
                            }else if(num == 2){
                                $(".imgfan1").eq(0).removeClass("bigFont");
                                $(".imgpay").eq(0).addClass("animate2");
                                $(".imgpay").eq(1).addClass("animate3");
                                $(".imgpay").eq(2).css("opacity",1);
                            }else if(num ==3){
                                $(".imgfont1").eq(0).removeClass("bigFont");
                                $(".imgfont").eq(0).css("opacity",0)
                                $(".imgfan1").eq(0).addClass("bigFont");
                            }else if(num == 4){
                                $(".imgp1").eq(0).removeClass("bigFont");
                                $(".imgp").eq(0).css("opacity",0)
                                $(".imgfont1").eq(0).addClass("bigFont");
                                $(".imgfont").eq(0).css("opacity",1)
                            }else if(num == 5){
                                $(".imgp1").eq(0).addClass("bigFont");
                                $(".imgp").eq(0).css("opacity",1)
                            }
                    })
                }
            }
        })
    })
</script>
</body>
</html>
Sixteen_
关注
专栏目录
Fiddler抓包工具详解
悦分享
10-30 2022
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP（HyperText Transfer Protocol）协议是基于TCP的应用层协议，它不关心数据传输的细节，主要是用来规定客户端和服务端的数据传输格式，最初是用来向客户端传输HTML页面的内容。默认端口是80 3.http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议HTTP请求报文主
使用html仿支付宝首页,仿支付宝首页头部伸缩效果
weixin_42353061的博客
06-15 480
每次打开支付宝首页滑动，头部的伸缩动画甚是吸引人。于是自己决定动手来实现一个。无图言虚空，效果图：首先看到这种效果，第一反应就是coordinatorLayout布局，android studio新建项目时，可以直接新建个Scrolling Activity来查看demo效果。官方自带的布局示例：gradle关联implementation'com.android.support:design:...
js监听鼠标的滚轮滚动事件
qq_41756580的博客
07-24 1万+
不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件。 具体实现：1. 需要添加事件监听，代码如下：兼容firefox采用addEventListener监听 windowAddM...
支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouchEnd)
热门推荐
Marswill
08-29 2万+
我们知道在前端开发中事件是交互中最重要的概念。那么在支付宝小程序开发中也不例外，他是交互中非常重要的因素。但是在移动端由于界面和用户动作的原因我们常用的事件就是Tap和Touch事件。 关于这部分的视频教学请大家前往： https://edu.csdn.net/course/detail/5750 事件使用范例 页面代码： &lt;button id="clickbtn" ...
滚轮事件总结
王龙楷
05-07 2731
原生js: 滚轮事件主要是火狐浏览器和其他浏览器的区别，而不是IE与其他浏览器的区别。 在Chrome等其他浏览器中（以下简称Chrome），滚轮事件是mousewheel。而在火狐中是DOMMouScroll，即使Firefox59。在滚轮事件中，“Chrome”有一个event.wheelDelta属性，而“Firefox”中有一个event.detail属性。二者区别： event.whee...
小说网页功能测试
weixin_65417504的博客
03-17 1183
对于小说网页个人中心主要功能进行测试
关于测试中常用到的一些方法、策略总结
Loadrunn的专栏
04-18 1万+
一些常用模块的测试用例 1、登录　　2、添加　　3、查询　　4、删除 1、登录 ①用户名和密码都符合要求（格式上的要求） ②用户名和密码都不符合要求（格式上的要求） ③用户名符合要求，密码不符合要求（格式上的要求） ④密码符合要求，用户名不符合要求（格式上的要求） ⑤用户名或密码为空 ⑥数据库中不存在的用户名，不存在的密码 ⑦数据库中存在的用户名，错误的密码 ⑧数据库中不存在的
Cocos Creator 2.3.0 更新说明
Cocos的博客
02-17 1932
Hi，各位开发者，经过长时间的开发和准备，Cocos Creator 2.3 在今日终于正式发布啦。这个版本不仅移植了 Cocos Creator 3D 中的物理、碰撞和 3D 粒子系统，还升级到了和 3D 引擎一致的正式版本材质系统，能够胜任更多品类的游戏开发！ 从 v2.0 用 3D 渲染器重写、v2.1 开放 3D 能力至今，Cocos Creator 缺失的 3D 能力已经在迭代中逐步补...
最全面鸿蒙系统开发的相关资料收录
Wscats
07-31 4204
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架，进行项目目录解读，JS FA、常用和自定义组件、用户交互、JS 动画的实现，通过本示例可以基本了解和学习到 JavaScript UI 的开发模式。 本项目是基于 OpenHarmony 项目而不是 HarmonyOS 项目，请注意运行环境。 请参考 OpenHarmony 项目配置方法 进行项目配置和运行。 如果你不熟悉 OpenHarmony 的 JS 开发，请参考该项目的 开发讲解。 示例 下载 awesome-har
基于大模型技术的算力产业监测服务平台设计
09-17
内容概要：本文提出了一种新型算力产业监测服务平台的设计理念，运用国内自主研发的大模型技术支持，通过对传统技术的改进和完善，提出了三层架构的设计方法，即基础设施层（含向量数据库和模型训练）、大模型应用框架层（强化数据处理与多维关系挖掘）及业务层（如智能分析助手）。这种设计方案旨在提高算力产业发展监测与决策制定的质量。 适合人群：电信行业的从业人员及研究人员；算力产业链各环节管理者；政府相关机构和政策决策者。 使用场景及目标：在多种算力相关的应用场景（如云计算中心管理，数据中心监测，政策分析）中辅助决策者进行快速有效的信息获取和技术选择；助力算力产业发展方向的精确把控和战略调整。 其他说明：随着大模型技术的日臻成熟，该算力产业监测服务平台预计将进一步丰富自身的应用领域和服务深度，以促进算力行业更智慧化发展。
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot.zip
最新发布
09-17
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot
吉他谱_What I've Done - Linkin Park.pdf
09-17
初级入门吉他谱 guitar tab
吉他谱_Too sweet - Hozier.pdf
09-17
初级入门吉他谱 guitar tab
Linux使用的一些笔记，包括shell命令，软件，一些实用的网站的整理_Linux_note.zip
09-17
Linux使用的一些笔记，包括shell命令，软件，一些实用的网站的整理_Linux_note
基于ssm的机房预约系统设计与实现.docx
09-17
基于ssm的机房预约系统设计与实现.docx
app执行Linux命令_app-Linux-.zip
09-17
app执行Linux命令_app-Linux-
吉他谱_Would - Alice in Chains.pdf
09-17
初级入门吉他谱 guitar tab
吉他谱_Yellow Ledbetter - Pearl Jam.pdf
09-17
初级入门吉他谱 guitar tab
OpenLayers 鼠标滚轮事件控制
"openlayers的鼠标滚轮事件" 在OpenLayers中，鼠标滚轮事件用于控制地图的缩放，允许用户通过滚动鼠标滚轮来放大或缩小地图视图。这个功能是通过`OpenLayers.Control.Navigation`类提供的，该类包含了处理鼠标滚轮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值