zoukankan      html  css  js  c++  java
  • 实现滚动导航效果

    由于近期有一个页面需要滚动加导航效果,以前在网上搜了一个鼠标滚动事件做了一个效果,但代码太冗余,不喜欢,所以抽时间研究了一下,使用jquery+滚动监听写了一个小demo,希望能帮助到有需要的朋友。

    代码如下:

    <style type="text/css">
                .cont li{
                    display: inline-block;
                    width: 100px;
                    height: 100px;
                    margin: 0 20px;
                }
                .cont ul{
                    display: inline-block;
                    width: 500px;
                    text-align:left;
                    border: 1px dotted #FFACAC;
                }
                .cont{
                    text-align: center;
                    width: 600px;
                    margin: 0 auto;
                    border:1px solid #00FFFF
                }
                .menu{
                    position: fixed;
                    right: 500px;
                    top: 100px;
                }
                .menu ul{
                    list-style: none;
                }
                .menu li{
                    cursor: pointer;
                }
                .menu ul a{
                    color: #00FFFF;
                    text-decoration: none;
                }
                .menu ul li.act a{
                    color: #FF6666;
                }
    </style>
    <div class="menu">
                <ul>
                    <li class="act" data-url="item1"><a>第一个</a></li>
                    <li data-url="item2"><a>第二个</a></li>
                    <li data-url="item3"><a>第三个</a></li>
                    <li data-url="item4"><a>第四个</a></li>
                </ul>
            </div>
            <div class="cont">
                <ul>
                    <p id="item" data-val="0">第一个</p>
                    <li><a href=""><img src=""/></a></li>
                </ul>
                <ul>
                    <p id="item" data-val="1">第二个</p>
                    <li><a href=""><img src="/></a></li>
                </ul>
                <ul>
                    <p id="item" data-val="2">第三个</p>
                    <li><a href=""><img src=""/></a></li>
                    
                </ul>
                <ul>
                    <p id="item" data-val="3">第四个</p>
                    <li><a href=""><img src=""/></a></li>
                </ul>
    </div>
    <script type="text/javascript">
    $(function(){
                    var top1=$("#item1").offset().top;
                    var top2=$("#item2").offset().top;
                    var top3=$("#item3").offset().top;
                    var top4=$("#item4").offset().top;
                    
                    $(".menu li").click(function(){
                        scrollH=$("#"+$(this).attr("data-url")).offset().top;
                        $("html,body").animate({ "scrollTop": scrollH }, 600);
                    })
                    
                    $(window).scroll(function(){//鼠标滚动监听
                        var h=$(window).scrollTop();//获取滚动条高度
                        console.log(top4,h)
                        if(h>top4-100){
                            $(".menu li").removeClass();
                            $(".menu li")[3].setAttribute("class","act")
                        }else if(h>top3-100){
                            $(".menu li").removeClass();
                            $(".menu li")[2].setAttribute("class","act")
                        }else if(h>top2-100){
                            $(".menu li").removeClass();
                            $(".menu li")[1].setAttribute("class","act")
                        }else if(h>top1-100){
                            $(".menu li").removeClass();
                            $(".menu li")[0].setAttribute("class","act")
                        }
                    })
                    
                })
    </script>

    这个js内容比较多,然后我又优化了一下,当然,两个js都可以实现,但是使用上面一个js需要将html里面的p标签的class改为对应的item1...,还有,html里面的内容必须要把整个页面的内容都撑开,不然无法使用。

    <script type="text/javascript">
    $(function(){
                    //获取页面上的item
                    var items=$(".cont #item");
                    console.log(items)
                    $(".menu li").click(function(){
                        var i=$(this).index();
                        console.log(items[i])
                        scrollH=items[i].offsetTop;
                        $("html,body").animate({ "scrollTop": scrollH }, 600);
                    })
                    $(window).scroll(function(){//鼠标滚动监听
                        var h=$(window).scrollTop();//获取滚动条高度
                        items.each(function(){
                            if(h>$(this).offset().top-100){
                                var i=$(this).attr("data-val");
                                $(".menu li").removeClass();
                                $(".menu li")[i].setAttribute("class","act");
                            }
                        })
                    })
                })
     </script>

    配图:

     注:此demo实现思路是借鉴了慕课网https://www.imooc.com/video/782的案例。但是里面使用的是css的 expression表达式得到的,由于在网上了解到 expression具有危险性,所有并没有使用此方法。

    源代码:https://github.com/G-xiaojianwei/study_demo/blob/master/%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%95%88%E6%9E%9C.html

  • 相关阅读:
    win10 uwp 获得缩略图
    win10 uwp 获取指定的文件 AQS
    win10 uwp 使用 Geometry resources 在 xaml
    WPF 如何画出1像素的线
    Windows 10 快捷键汇总表格
    要让CLR挂掉的话……
    UWP 分享用那个图标
    UWP 分享用那个图标
    PHP jdtogregorian() 函数
    PHP jdtojewish() 函数
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/10255423.html
Copyright © 2011-2022 走看看