鼠标滚轮控制页面滚动（山寨苹果官网iPhone5s的滚屏动画实例）-鼠标特效-点滴吧

www.diandiba.com

记录点点滴滴，尽在点滴吧

文章

您现在的位置：首页 > 鼠标特效 > 特效详情

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

更新时间：2015/1/12 13:05:34 下载：3078次

<!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>

预览效果复制代码保存代码提示：可以先修改部分代码后再运行

最近发现这种效果很流行，自己也写一个，以后应该能用上。

技术重点应该就是鼠标滚轮的兼容性写法那里，因为jquery没有封装鼠标滚轮事件，用原生JS写的话每个浏览器的标准都不一样，很麻烦。

右侧边栏按钮点击滚动页面的效果就是普通的图片滚动展示效果而已，没什么难度。

上一个素材：jQuery鼠标悬停显示文字效果代码 下一个素材：鼠标跟随文字代码