jquery楼层滚动特效

来源：互联网发布：淘宝网新店有支持吗编辑：程序博客网时间：2024/04/29 02:28
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>jq 楼层滚动效果</title>        <style>            * {                margin: 0;                padding: 0;            }            i {                font-style: normal;            }            ul,            li,             dl,            ol{                list-style: none;            }            #LoutiNav {                border: 1px solid gray;                width: 30px;                position: fixed;                top: 150px;                left: 50px;                display: none;            }            #LoutiNav li {                width: 30px;                height: 30px;                border-bottom: 1px solid gray;                line-height: 30px;                text-align: center;                cursor: pointer;            }            #LoutiNav span {                display: none;            }            #LoutiNav .active {                background: white;                color: darkred;            }            #LoutiNav li:hover span {                display: block;                font-size: 12px;                background: darkred;                color: white;            }            #LoutiNav li:hover i {                display: none;            }            #goTop {                width: 40px;                height: 40px;                line-height: 40px;                text-align: center;                background: gray;                position: fixed;                bottom: 30px;                right: 30px;                cursor: pointer;                border-radius: 5px;                display: none;            }            #goTop:hover {                background: darkred;                color: white;            }            #goTop:hover span {                display: block;            }            #erweima {                width: 130px;                height: 130px;                background: palegreen;                display: none;                position: absolute;                right: 46px;                bottom: 5px;                line-height: 130px;                text-align: center;                font-size: 20px;                border-radius: 10px;            }            #header {                height: 200px;                background: palegoldenrod;                text-align: center;                line-height: 200px;                font-size: 72px;                margin: 0 auto;            }            .louceng {                height: 810px;                text-align: center;                line-height: 610px;                font-size: 120px;                margin: 0 auto;            }        </style>        <script src="js/jquery-1.7.2.min.js"></script>    </head>    <body>        <ul id="LoutiNav">            <li class="active"><i>1F</i><span>服饰</span></li>            <li><i>2F</i><span>美妆</span></li>            <li><i>3F</i><span>手机</span></li>            <li style="border-bottom: none;"><i>4F</i><span>家电</span></li>        </ul>        <div id="goTop">            <span id="erweima">我是二维码</span> Top        </div>        <div id="header">头部</div>        <div id="main">            <div class="louceng" style="background: papayawhip;">服饰</div>            <div class="louceng" style="background: peachpuff;">美妆</div>            <div class="louceng" style="background: peru;">手机</div>            <div class="louceng" style="background: pink;">家电</div>        </div>        <script>            var oNav = $('#LoutiNav'); //导航壳            var aNav = oNav.find('li'); //导航            var aDiv = $('#main .louceng'); //楼层            var oTop = $('#goTop'); //回到顶部             $(window).scroll(function() {                    //可视窗口高度                    var winH = $(window).height();                    //鼠标滚动的距离                    var iTop = $(window).scrollTop();                    if(iTop >= $("#header").height()) {                        oNav.fadeIn();                        oTop.fadeIn();                        //鼠标滑动样式改变                        aDiv.each(function() {                            if(winH + iTop - $(this).offset().top > winH / 2) {                                aNav.removeClass('active');                                aNav.eq($(this).index()).addClass('active');                            }                        })                    } else {                        oNav.fadeOut();                        oTop.fadeOut();                    }                })            //点击回到当前楼层            aNav.click(function() {                var t = aDiv.eq($(this).index()).offset().top;                $('body,html').animate({                    "scrollTop": t                }, 500);                $(this).addClass('active').siblings().removeClass('active');            });            //回到顶部            oTop.click(function() {                $('body,html').animate({                    "scrollTop": 0                }, 500)            })        </script>    </body></html>
0 0