杰晶网络

javascript手工制作悬浮菜单
网络编程 2024/11/9 佚名
3 2

有选择性的重复造一些轮子，未必是件坏事。Aaron的博客上加了一个悬浮菜单，貌似显得很高大上了。虽然这类小把戏也不是头一次见了，但是从未自己写过。今天就选择性的拿这个功能写一写。下面是这个轮子的开发过程，也可以当作是一篇需求文档的分析和实现过程。

演示地址：http://sandbox.runjs.cn/show/to8wdmuy

源码下载：https://github.com/bjtqti/floatmenu

javascript手工制作悬浮菜单

第一步创建dom节构：

复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AppCarrier</title>
    <link rel="stylesheet" href="menu.css">
</head>
<body>
    <div id="content">
              <h1 id="test1">test1</h1>
              <p>The past can hurt. But you can either run from it or learn from it</p>
              <p>过去是痛楚的，但你要么逃避，要么从中成长</p>
              <p>One meets his destiny on the road he takes to avoid it</p>
              <p>往往在逃避命运的路上，却与之不期而遇</p>
              <p>Rules are meant to be broken</p>
              <p>规则就该被打破。</p>
              <p>Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.</p>
              <p>岁月流逝只令容颜苍老，激情不再却使心灵枯萎。</p>
              <h1 id="test2">test2</h1>
              <p>只有不断地练习学到的知识，你才能真正掌握它。</p>
              <p>Live every day to the fullest.</p>
              <p>尽享每日。</p>
              <p>Keep your eyes on the stars, and your feet on the ground.</p>
              <p>志存高远，脚踏实地。</p>
              <p>Always be up for an unexpected adventure.</p>
              <p>随时准备开始一场意外冒险吧。</p>
              <p>Life is full of disappointment. You can't dwell on things. You have to move on.</p>
              <p>生活常不如意，别沉溺往事，要勇往直前。</p>
              <p>I'm a free spirit. I can't be caged.</p>
              <p>我的灵魂是自由的，不该被束缚。</p>
              <p>Sometimes the heart sees what is invisible to the eye.</p>
              <p>目不见者，心可感之</p>
              <p>The simple things are also the most extraordinary things, and only the wise can see them.</p>
              <p>最平凡的事也是最非凡的事，只有智者才明白。</p>
              <h1 id="test3">test3</h1>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <h1 id="test4">test4</h1>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
              <p>how many xxxxxx</p>
    </div>
    <div class="menu" id="menubar">
        <p class="static">隐藏</p>
        <ul>
            <li><a href="#test1">test1</a></li>
            <li><a href="#test2">test2</a></li>
            <li><a href="#test3">test3</a></li>
            <li><a href="#test4">test4</a></li>
        </ul>
    </div>
</body>
<script src="/UploadFiles/2021-04-02/menu.js"> </html>

第二步准备css文件：

复制代码 代码如下:
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
}
/*文章内容区*/
#content {
    width:400px;
    margin: 0 auto;
    font-size: 2em;
}
/*悬浮菜单*/
.menu {
    position: fixed;
    top:20%;
    right: 0;
    width:200px;
    border: 1px solid gray;
    border-radius: 5px;
}
.menu li {
    height: 2em;
    line-height: 2em;
}
.red {
    color : red;
}
.hide {
    display: none;
}
/*隐藏悬浮菜单*/
.slideIn {
    transform : translate3d(202px, 0, 0);
    transition-duration : .5s;
}
/*显示悬浮菜单*/
.slideOut {
    transform : translate3d(0, 0, 0);
    transition-duration : .5s;
}
.static {
    color:#007aff;
    text-align: center;
}
/*显示悬浮球*/
.toShow {
    display: block;
        width: 4.8em;
        height: 2em;
        line-height: 2em;
        border-radius: .5em;
    border:1px solid gray;
    transform : translate3d(-5em, 0, 0);
    transition-duration : 1s;
}

第三步开始编写js代码：

复制代码 代码如下:
(function(doc){
    //收集各章节的链接位置
     var pos = [],
         //收集菜单上的项目
         links = doc.getElementsByTagName('a'),
         //收集章节的标题
         titles = doc.getElementsByTagName('h1'),
         //悬浮菜单
         menu = doc.getElementById('menubar'),
         //当前选择项
         currentItem=null;
     //添加红色样式
     var addClass = function (element){
             currentItem && currentItem.removeAttribute('class');
             element.setAttribute('class','red');
             currentItem = element;
         },
         //网页被卷去的高:
        getScrollTop = function (){
            return Math.ceil(document.body.scrollTop)+1;
        },
         //计算滚动位置
        startScroll = function (){
            var scrollTop = getScrollTop(),
                len = titles.length,
                i = 0;
            //第一条
            if(scrollTop>=0 && scrollTop<pos[0]){
                addClass(links[0]);
                return;
            }
            //最后一条
            if(scrollTop>=pos[len-1]){
                addClass(links[len-1]);
                return;
            }
            //中间
            for(;i<len;i++){
                if(scrollTop > pos[i] && scrollTop < pos[i+1]){
                    addClass(links[i]);
                    break;
                }
            }
    };
     //点击列表中的链接变色
     menu.onclick=function(e){
         var target = e.target || e.srcElement;
         if(target.nodeName.toLowerCase() === 'a'){
             //列表项状态指示
             addClass(target);
             return;
         }
         if(target.nodeName.toLowerCase() === 'p'){
             if(target.className == 'static'){
                 //隐藏菜单
                 this.className = 'menu slideIn';
                 setTimeout(function(){
                     target.className = 'static toShow';
                     target.innerHTML = '显示';
                 },1000);
             }else{
                 //显示菜单
                 target.className = 'static';
                 target.innerHTML = '隐藏';
                 this.className = 'menu slideOut';
             }
         }
     }
    //计算各章节的初始位置
    var ln = titles.length;
    while(--ln>-1){
        //titles[len].offsetParent.offsetTop = 0;
        pos.unshift(titles[ln].offsetTop);
    }
    startScroll();
    //监听滚动
    window.onscroll = function(){
          startScroll()
    }
})(document);

分析:

    1. 实现自动跳转到指定节

          这一步可以利用<a>标签的锚功能来做，由于html5以后不支持name 属性(HTML5 不支持。规定锚的名称。)，所以考虑用ID来跳转。

    2. 标识悬浮菜单中的项属于左边内容中的哪个章节。

          这一步是难点，先简单分析一下：

            2.1 第一种情况，就是人为点击菜单项。这个很容易，只要标识点击的元素就可以了。

            2.2 第二种情况，通过鼠标中键滚动或拖动滚动条，这个时候要关联左边内容和右边菜单项，这是最难的地方。考虑分步实施，先易后难，各各击破的策略。

           　　2.2.1 先收集标题元素的坐标高度。也就是所有的h1标签的垂直高度。存入数组1.

           　　2.2.2 收集菜单项中的a元素，存入数组2.

                2.2.3  监听滚动事件，判断当前内容属于哪个菜单项。

                    做一步的时候，建议在稿纸上画一个图：

　　　　　　　　　　　　A1

                         ****************
                         *       A2
                         *
                         ****************
                         *       A3
                         *
                         ****************
                         *
                         *     A4
                         *

　　　　　　　每滚动一次，就判断当前滚动的距离是在哪一个区间，如果是0到A1则是第1章，A1到A2则是第2章,以此类推。

                    关于元素的位置高度，我这里简单地用element.offsetTop来获取，可能会存在兼容性问题，如果用jquery来做的话，应当是$('element').offset().top,

                    同样的，滚动条的高度，我也是简单的用了document.body.scrollTop来获取，如果换成jquery的话，应当是$(window).scrollTop();

                   画图的作用是把抽象的问题具体化，帮助我们思考，找出规律。也许称为“建模”会显得高大上一些吧。

                    需要强调的是数组1和数组2中的关系应当是一一对应的。如<a href="#h1">对应的是<h1 id="h1">。

           2.3 第三种情况，直接进入页面时的菜单状态指示。比如通过index.html#h3这样的地址进来，菜单中的h3应当要突出显示。

    3.  实现悬浮菜单的显示和隐藏动画。

        3.1  这一步应当是比较简单的，可以考虑先做。利用css3的tramsform属性就可以了，简单高效，跨浏览器的话，注意兼容。

　　　　  注意transform : translate3d(x轴, y轴, z轴); 用3d是可以利用硬件加速，增加动画效果，但是功耗会增加，善用！第一个参数是控制左右方向，如果为正，则表示向右移动，如果为负则向左移动。这么说其实是不严谨的，实际上应当根据参考点来确定，比如元素的静止时的x坐标是0，那么增加x的值向右，减少为向左，0为复位。

    分析完之后，就是编写代码了。这没有什么好说的。尽情享受敲击键盘产生的乐感吧。

    写完之后，预览一下，点击菜单，跳入指定章节，同时点击项变红色，刷新当前页面，依赖显示正确。滑动一下滚轮，菜单项随着内容的变化而相应的变化，拖动一下滚动条，也是这样，最后点击一下隐藏，菜单缩回去，点击显示，菜单滑出来。这样悬浮功能就做完了。

以上就是本文的全部内容了，希望大家能够喜欢。

标签：
javascript,悬浮菜单
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“javascript手工制作悬浮菜单”
暂无“javascript手工制作悬浮菜单”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网