• 楼梯式定位导航系统


    <DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

     <meta name="Generator" content="EditPlus">

     <meta name="Author" content="">

     <meta name="Keywords" content="">

    <meta name="Description" content="">

    <title>楼梯式定位导航系统</title>

    <style>

    *{margin:0;padding:0;}

    body,html{height:2000px;}

    #daohang{

    80px;

    height:510px;

    background-color:#ff00ff;

    position:fixed;/*固定定位 把元素固定到浏览器窗口上*/

    left:30px;

    top:150px;

    /*滑动滚动条,导航没移动,固定到浏览器窗口*/

    border-radius:5px;/*圆角*/

    border:1px solid black;

    display:none;/*注意*/

    }

    #daohang ul li{

           list-style:none;

           60px;

           height:40px;

           border-bottom:1px solid #ddd;

           text-align:center;

           color:#666;

           font-size:12px;

           line-height:40px;

           font-family:"微软雅黑";

           margin:0 auto;

           cursor:pointer;

           border-radius:

    }

    #daohang ul li:hover:{

         color:#ff00ff;

    }

    @font-face{}

    .iconfont{

    增加margin-right:10px;

    margin-left:2px;

    }/*增加路径*/

    #daohang ul li.active{

    background:#f10180;

    color:#fff;

    }

    #head{

    100%;

    height:600px;

    background-color:red;

    }

    #main{

    1000px;

    height:1000px;

    background:green;

    margin:0 auto;

    }

    #main{

    margin:0 auto;

    }

    #main ul li{

    list-style:none;

    1000px;

    height:800px;

    font-size:25px;

    font-weight:bold;

    }

    </style>

    </head>

    <body>

    <!--长方形区域-->

    <div id="daohang">

        <ul>

               

               <li class="active"><i class="iconfont">&#x33/*修改*/</i>精选</li>

               <li><i class="iconfont">&#xe620/*修改*/</i>女装</li>

               <li><i class="iconfont">&#xe62b/*修改*/</i>鞋包</li>

               <li><i class="iconfont">&#xe62e/*修改*/</i>男士</li>

               <li><i class="iconfont">&#xe62a/*修改*/</i>运动</li>

               <li><i class="iconfont">&#xe607/*修改*/</i>饰品</li>

               <li><i class="iconfont">&#xe669/*修改*/</i>美妆</li>

               <li><i class="iconfont">&#xe620/*修改*/</i>母婴</li>

               <li><i class="iconfont">&#xe60d/*修改*/</i>居家</li>

               <li><i class="iconfont">&#xe675/*修改*/</i>国际</li>

               <li><i class="iconfont">&#xe625/*修改*/</i>生活</li>

               <li><i class="iconfont">&#xe684/*修改*/</i>预告</li>

               <li>预告</li>

        </ul>

    </div>

     <!--body是浏览器空白处-->

    <div id="head">

    </div>

    <div id="main">

        <ul>

               <li style="background-color:#ffff00">精选</li>

               <li style="background-color:#ffcc00">女装</li>

               <li style="background-color:#ff9900">鞋包</li>

               <li style="background-color:#ff6600">男士</li>

               <li style="background-color:#ff3300">运动</li>

               <li style="background-color:#ff0000">饰品</li>

               <li style="background-color:#660000">美妆</li>

               <li style="background-color:#663300">母婴</li>

               <li style="background-color:#3366ff">居家</li>

               <li style="background-color:#00cc00">国际</li>

               <li style="background-color:#6699ff">生活</li>

               <li style="background-color:#993399">预告</li>

        </ul>

    </div>

    </body> 

    <script src="js/jquery.js"></script> 

     <script>

    k=0;

     //jq获取对象

    //window是浏览器窗口,滚动浏览器窗口

    $("#window").scroll(function(){

       if(k==0){

      // console.log(1);//打印

    var sTop=$(window).scrollTop();//获得滚动条高度

    //当滚动到一定高度的时候才显示

    if(sTop>600){

        $("danhang").fadeIn();//淡入

    }else{

    $("danhang").fadeout();//淡出

    };

    //切换

    var mainLi=$("#main ul li");

    navLi.each(function(){

    var _index=$(this).index();

    var_height=$(this).offset().top+600;

    if(sTop<_height){

    $("#daohang ul li").eq(_index).addClass("active");siblings().remove("active");

    return false;

    };

    });

    //最开始的时候,滚动高度,肯定是都小于 对应区域到顶部距离

    //就看谁最先满足

    })//没有条件nav会一个一个跑上去

    $("#daohang ul li").click(function(){

    k=1;

    var _index=$(this).index();//当前下标

    $(this).addClass("active");siblings().remove("active");

    _height=$("#main ul li").eq(_index).offset().top+600;

    $("html,body").animate(scrollTop(_height),500);

    k=0;

    })

    //js没看懂

    </script>

    </html>

    阿里图标 

    fadeIn,animate区别

    hove,mouseput的区别

  • 相关阅读:
    layui 获取select下拉选项上自定义的属性
    TP中关联模型的使用
    安卓模仿直播中的闪动(放大缩小)的动画
    Android报错Multiple dex files define Lcom/ta/utdid2/c/a/c
    Date.parse()的坑
    Android应用加固的简单实现方案(二)
    Android应用加固的简单实现方案
    Android中ANR的触发机制-BroadcastReceiver篇
    Android中ANR的触发机制-Service篇
    Application中以标准模式启动Activity报错的原因分析
  • 原文地址:https://www.cnblogs.com/think90/p/5778204.html
Copyright © 2020-2023  润新知