zoukankan      html  css  js  c++  java
  • js锚链效果

    <div id="Function">
        <div >
            <h2>aa</h2>
            <ul id="link">
                <li><a href="#Function">Function</a></li>
                <li><a href="#Features">Features</a></li>
            </ul>
        </div>
        <div  id="Features" style="position:relative;">
            <span style="position:absolute;top:-400px;">&nbsp;</span>
            <div><h2>系统特点</h2></div>
        </div>
    </div>
    <script src="assets/js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#link li a").each(function (a, b) {   //找到id为nav的标签下所有li下的a标签  each循环便利所有的a标签
                $(b).click(function (a) {       //当点击标签时触发
                //$(b).mouseenter(function (a) {      //当鼠标指针穿过元素时触发mouseenter事件
                    var b = $(this);                //获取触发事件的a标签赋值给b
                    a.preventDefault();             //用于取消事件的默认行为
                    a = b.attr("href");                 //获取当前触发事件a标签的href属性值
                    a = $(a).offset().top - 400;        //获取id为当前a标签href属性值的标签距离顶端的位置 并减去400 (400为.fix_top的高度)
                    $("#link li a").removeClass("on");   //移除所有a标签上的on样式
                    b.addClass("on");                   //给当前a标签添加on样式
                    $("html, body").animate({           //animate jquery自定义动画效果 
                        scrollTop: a                    //设置滚动条位置为a的值
                    },
                1E3)
                })
            });
            $(window).scroll(function () {                  //当滚动滚轮或拖动滚动条时触发时间
                var a = $(window).scrollTop(),              //scrollTop() 方法返回元素的滚动条的垂直位置 赋值给a
                b = $("#Function").offset().top - 400,   //id为SILVERSTONE的标签距离页面顶部的位置减去400 赋值给b
                c = $("#Features").offset().top - 400;       //id为SUPPORT的标签距离页面顶部的位置减去400 赋值给a
                0 <= a && a < b && ($("#link li a").removeClass("on"), $("a[href='#Function']").addClass("on")); //当前滚动条位置大于等于0并且当前滚动条位置小于id为SILVERSTONE的标签距离页面顶端的位置时 将LIHGT标签高亮
                b <= a && a < c && ($("#link li a").removeClass("on"), $("a[href='#Function']").addClass("on"));
                c <= a && ($("#link li a").removeClass("on"), $("a[href='#Features']").addClass("on"))
            })
        });
    </script>
  • 相关阅读:
    深入浅出 消息队列 ActiveMQ
    win7系统如何恢复administrator用户
    为什么新建的管理员账号权限没有Administrator大?
    关于maven-jetty-plugin 自动重启问题
    jquery parent() parents() closest()区别
    【JEECG技术文档】JEECG部门管理员操作手册
    【JEECG技术文档】JEECG高级查询构造器使用说明
    【JEECG技术文档】数据权限自定义SQL表达式用法说明
    JEECG 3.7.2版本发布,企业级JAVA快速开发平台
    jeecg好用吗,看看大家的评价
  • 原文地址:https://www.cnblogs.com/cniteeq/p/3642534.html
Copyright © 2011-2022 走看看