鼠标滚轮控制页面滚动（山寨苹果官网iPhone5s的滚屏动画实例）

最新推荐文章于 2022-10-18 14:49:25 发布

最数据

最新推荐文章于 2022-10-18 14:49:25 发布

阅读量2.5k

点赞数 1

分类专栏： javascript 文章标签：滚动翻页 jquery

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近发现这种效果很流行，自己也写一个，以后应该能用上。
技术重点应该就是鼠标滚轮的兼容性写法那里，因为jquery没有封装鼠标滚轮事件，用原生JS写的话每个浏览器的标准都不一样，很麻烦。
右侧边栏按钮点击滚动页面的效果就是普通的图片滚动展示效果而已，没什么难度。

下面是代码，我都放在一个页面里面，为了可以直接运行看效果。

<!--
    Created on : 2013-12-18 16:26:23
    Author     : Liuxiaofan
-->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>山寨苹果官网iPhone5s的滚屏动画实例</title>
      <script src="http://www.liuxiaofan.com/demo/js/jquery-1.6.4.min.js"></script>
        <script>
            $(function() {
                /**
                 * 如转载请保留本人原创信息
                 * 代码来源 -刘晓帆的博客
                 * http://liuxiaofan.com
                 */
                var bodyEl = $('html,body'); //ff和ie需要html，chrome需要body，万恶的兼容性啊
                var siderBtn = $('.sider li');
                var boxEl = $('.box');
                var boxIndex = 0; //定义一个变量保存上次滚动到的是第几个box
                // 隐藏页面滚动条并且初始化页面位置为顶部
                bodyEl.css({'overflow': 'hidden'}).scrollTop(0);
                /**
                 * 为按钮绑定事件
                 * @returns {undefined}
                 */
                siderBtn.click(function() {
                    var btnIndex = $(this).index();
                    var tarBoxTop = boxEl.eq(btnIndex).offset().top; //取得box的offset.top值
                    var isAnimate = bodyEl.is(":animated"); //当前是否处于动画状态
                    var m = btnIndex - boxIndex; //算当前的按钮和当前显示的box的差值
                    //如果是0就不操作于不是动画状态才执行
                    if (m != 0 && !isAnimate) {
                        //如果是1代表是临近的
                        if (m == 1 || m == -1) {
                            bodyEl.animate({scrollTop: tarBoxTop}, 1000);
                        } else {
                            bodyEl.fadeOut(400);
                            setTimeout(function() {
                                bodyEl.fadeIn(400).scrollTop(tarBoxTop);
                            }, 400);
                        }
                        //改变右侧按钮的焦点
                        $('span', siderBtn).removeClass('cur');
                        $('span', $(this)).addClass('cur');
                        boxIndex = btnIndex;
                    }
                });
                /**
                 * 鼠标滚轮触发后的事件
                 */
                var mouseWheel = function(event) {
                    if (!event) {
                        event = window.event;
                    }
                    var delta = 0;//为了保存滚轮的滚动值
                    var tarBoxTop = boxEl.eq(boxIndex).offset().top; //取得当前box的offset.top值
                    var isAnimate = bodyEl.is(":animated"); //当前是否处于动画状态
                    //取滚轮滚动的值
                    if (event.wheelDelta) {
                        delta = event.wheelDelta / 120;//兼容chrome
                        if (window.opera) {//兼容opera
                            delta = -delta;
                        }
                    } else if (event.detail) {
                        delta = -event.detail / 3;//兼容ff
                    }
                    //判断是向上滚还是向下
                    if (delta > 0) {
                        if (boxIndex != 0) {
                            if (!isAnimate) {
                                bodyEl.animate({scrollTop: tarBoxTop - 1000}, 1000);
                                boxIndex--;
                            }
                        }
                    } else {
                        if (boxIndex != 4) {
                            if (!isAnimate) {
                                bodyEl.animate({scrollTop: tarBoxTop + 1000}, 1000);
                                boxIndex++;
                            }
                        }
                    }
                    //改变右侧按钮的焦点
                    $('span', siderBtn).removeClass('cur').eq(boxIndex).addClass('cur');
                };
                //绑定滚轮事件
                if (window.addEventListener) {
                    window.addEventListener('DOMMouseScroll', mouseWheel, false); //火狐和IE
                }
                window.onmousewheel = document.onmousewheel = mouseWheel; //chrome
            });
        </script>
        <style type="text/css">
            body{
                padding: 0;
                margin: 0;
                font-size: 12px;
                font-family: 微软雅黑;
            }
            .header{
                width: 100%;
                height: 80px;
                line-height: 80px;
                text-align: center;
                background: #fff;
                opacity:0.5;
                position: fixed;
            }
            .box{
                width: 100%;
                height: 1000px;
                text-align: center;
                line-height: 1000px;
            }
            .box1{
                background: #95D95A;
            }
            .box2{
                background: #FF6BA1;
            }
            .box3{
                background: #FFB557;
            }
            .box4{
                background: #E59AE7;
            }
            .box5{
                background: #70CBF8;
            }
            .sider{
                position: fixed;
                right: 50px;
                top:40%;
            }
            .sider ul{
                list-style: none;
            }
            .sider li{
                width: 16px;
                height: 16px;
                padding-top: 10px;
                cursor: pointer;
            }
            .sider span{
                display: block;
                background: #777;
                width: 4px;
                height: 4px;
                border-radius:20px;
                margin: 0 auto;
            }
            .sider span.cur{
                width: 8px;
                height: 8px;
                border: 1px solid #777;
                background: rgba(0, 0, 0, 0);
            }
            .footer{
                width: 100%;
                height: 300px;
                background: #333;
                color: #fff;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="header">头</div>
        <div class="sider">
            <ul>
                <li>
                    <span class="cur"></span>
                </li>
                <li>
                    <span></span>
                </li>
                <li>
                    <span></span>
                </li>
                <li>
                    <span></span>
                </li>
                <li>
                    <span></span>
                </li>
            </ul>
        </div>
        <div class="box1 box">box1</div>
        <div class="box2 box">box2</div>
        <div class="box3 box">box3</div>
        <div class="box4 box">box4</div>
        <div class="box5 box">box5</div>
        <div class="footer">脚</div>
    </body>
</html>

原文地址：http://liuxiaofan.com/2013/12/18/1617.html

最数据

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮控制页面滚动（山寨苹果官网iPhone5s的滚屏动画实例）

最近发现这种效果很流行，自己也写一个，以后应该能用上。技术重点应该就是鼠标滚轮的兼容性写法那里，因为jquery没有封装鼠标滚轮事件，用原生JS写的话每个浏览器的标准都不一样，很麻烦。右侧边栏按钮点击滚动页面的效果就是普通的图片滚动展示效果而已，没什么难度。下面是代码，我都放在一个页面里面，为了可以直接运行看效果。<!-- Created on : 2013-12-
复制链接

扫一扫