随鼠标轮动翻动层————jquery小练习

   闲来无事在网站上看见一个网页制作的不错，就仿照做来看看。特此记录下来。

 亮点：随鼠标上下滚动，展示页面随之不同，翻动效果。

功能点：鼠标向上，向下判断事件。

css 代码

     html {
            overflow-y: hidden;
        }

        .hide {
            display: none;
        }

        .show {
            display: block;
        }

        .box {
            height: 650px;
            width: 100%;
        }

        .foot {
            position: fixed;
            height: 100px;
            top: 150px;
            right: 0px;
        }

        ul li a:link {
            text-decoration: none;
            color:gold;
            
        }

     

        .foot ul li {
            display: block;
            width: 50px;
            height: 30px;
            border: solid 1px white;
            padding: 5px;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            cursor: pointer;
        }

        .active {
            color: white;
        }

        #red {
            background-color: brown;
        }

        #orange {
            background-color: burlywood;
        }

        #yellow {
            background-color: yellow;
        }

        #green {
            background-color: green;
        }

        #blueness {
            background-color: chartreuse;
        }

        #blue {
            background-color: blue;
        }

        #purple {
            background-color: darkmagenta;
        }

　　js 代码

  var index1 = 0;
        var scrollFunc = function (e) {
            e = e || window.event;
            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                    //alert("滑轮向上滚动");
                    index1 = $("ul li a[class=active]").parent().index();
                  
                    console.log(index1);
                    sliderIndex(index1, 0);
                }
                else { //当滑轮向下滚动时
                    //alert("滑轮向下滚动");
                    index1 = $("ul li a[class=active]").parent().index();
                    console.log(index1);
                    sliderIndex(index1, 1);
                }
            }
            //} else if (e.detail) {  //Firefox滑轮事件
            //    if (e.detail > 0) { //当滑轮向上滚动时
            //        alert("滑轮向上滚动");
            //    }
            //    if (e.detail < 0) { //当滑轮向下滚动时
            //        alert("滑轮向下滚动");
            //    }
            //}
        }
        //给页面绑定滑轮滚动事件
        //if (document.addEventListener) {//firefox
        //    document.addEventListener('DOMMouseScroll', scrollFunc, false);
        //}
        //滚动滑轮触发scrollFunc方法  //ie 谷歌
        window.onmousewheel = scrollFunc;

        function sliderIndex(index, type) {
            if (index == 0 && type == 0) {
                alert("到顶了！");
            }
            else if (index >= 0) { 

                var num = 0;
                if (type == 0) {
                    num = index - 1;
                }
                else {
                    num = index + 1;
                }
                if (num == 7)
                    num = 0;

                $(".foot ul li a").removeClass("active");
                $(".foot ul li a:eq(" + num + ")").addClass("active");

                if (type==0)
                {
                    $("#main div:eq(" + num + ")").slideDown("slow");
                }
                else
                 $("#main div:eq(" + index + ")").slideUp("slow");

            }
        }
        $(function () {
            $(".foot ul li a").click(function () { 
                $(".foot ul li a").removeClass("active");
                $(this).addClass("active");
                var box = $(this).attr("data-id");
                console.log(box);
                $("#" + box).slideUp("slow");

            })

        })

　　

 

html 代码

 <div id="main">
        <div id="red" class="box"></div>
        <div id="orange" class="box"> </div>
        <div id="yellow" class="box"></div>
        <div id="green" class="box"> </div>
        <div id="blueness" class="box"></div>
        <div id="blue" class="box"> </div>
        <div id="purple" class="box"></div>
    </div>
    <div class="foot">
        <ul>
            <li data-id="red"> <a href="#red" class="active">赤</a> </li>
            <li data-id="orange"> <a href="#orange">橙 </a></li>
            <li data-id="yellow"> <a href="#yellow">黄</a> </li>
            <li data-id="green"> <a href="#green">绿</a> </li>
            <li data-id="blueness"> <a href="#blueness">青</a> </li>
            <li data-id="blue"> <a href="#blue">蓝</a> </li>
            <li data-id="purple"> <a href="#purple">紫</a></li>
        </ul>
    </div>