js电梯效果

来源：互联网发布：linux mysql 是否启动编辑：程序博客网时间：2024/05/16 05:10

html页面

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>左侧电梯演示</title>    <script src="js/jquery-1.10.2.js"></script>    <script src="js/LiftEffect.js"></script>    <style>        *{            margin: 0;            padding: 0;        }        body{            height: 6000px;        }        .lift-nav{            position: fixed;            top: 100px;            left: 30px;            display: none;        }        .lift-nav li{            width: 30px;            height: 30px;            text-align: center;            line-height: 30px;            color: #fff;            padding: 10px 10px;            margin-bottom: 10px;            background: skyblue;            cursor: pointer;        }        .lift-nav li.current{            background: tomato;        }        .t1,.t2,.t3,.t4,.t5,.t6{            width: 800px;            height: 400px;            text-align: center;            line-height: 400px;            background: skyblue;            margin: 100px auto;            font-size: 30px;            color: #fff;        }        .t1{            margin-top: 200px;        }        .t2{            background: pink;        }        .t3{            background: tomato;        }        .t4{            background: grey;        }        .t5{            background: yellow;        }        .t6{            background: seagreen;        }    </style></head><body><div class="lift-nav">    <ul class="lift">        <li>1楼</li>        <li>2楼</li>        <li>3楼</li>        <li>4楼</li>        <li>5楼</li>        <li>6楼</li>    </ul></div><div class="lift-target">    <div class="t1">这是1楼</div>    <div class="t2">这是2楼</div>    <div class="t3">这是3楼</div>    <div class="t4">这是4楼</div>    <div class="t5">这是5楼</div>    <div class="t6">这是6楼</div></div><script>    $(function(){        LiftEffect({            "control1": ".lift-nav",                          //侧栏电梯的容器            "control2": ".lift",                           //需要遍历的电梯的父元素            "target": [".t1",".t2",".t3",".t4",".t5",".t6"], //监听的内容，注意一定要从小到大输入            "current": "current"                          //选中的样式        });    })</script></body></html>

LiftEffect.js内容

// LiftEffect({//  "control1": ".lift2",                         //侧栏电梯的容器//  "control2": "#ccc",                           //需要遍历的电梯的父元素//  "target": [".dianti1",".dianti2",".dianti3"], //监听的内容，注意一定要从小到大输入//  "current": "xuanzhong"                        //选中的样式// });function LiftEffect(json){var array=[];for(var i =0; i<json.target.length;i++){    var t = $(json.target[i]).offset().top;    array.push(t);}function Selected(index){    $(json.control2).children().eq(index).addClass(json.current).siblings().removeClass(json.current);}$(window).on("scroll",Check);function Check(){    var wst = $(window).scrollTop();    if(wst >= $(json.target[0]).offset().top-100){        $(json.control1).fadeIn(500);    }else{        $(json.control1).fadeOut(500);    }    var key =0;    var flag = true;    for(var i =0; i<array.length; i++){        key++;        if(flag){            if(wst >= array[array.length-key]-300){                var index = array.length-key;                flag = false;            }else{                flag=true;            }        }    }    Selected(index);}$(json.control2).children().on("click",function(){        $(window).off("scroll");        var index = $(this).index();        Selected(index);        var flag = true;        for(var i =0; i<array.length; i++){            if(flag){                if(index == i){                    $("html,body").stop().animate({                        "scrollTop": array[i]-50                    },500,function(){                        $(window).on("scroll",Check);                    });                    flag = false;                }else{                    flag=true;                }            }        }});}

注意要导入js库

阅读全文

0 0