javascript手工制作悬浮菜单


Posted in Javascript onFebruary 12, 2015

有选择性的重复造一些轮子,未必是件坏事。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="menu.js"></script>

</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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
js右键菜单效果代码
Jul 21 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
jquery+javascript编写国籍控件
Feb 12 #Javascript
JS实现的生成随机数的4个函数分享
Feb 11 #Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 #Javascript
Javascript核心读书有感之语句
Feb 11 #Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 #Javascript
JavaScript中的函数模式详解
Feb 11 #Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 #Javascript
You might like
我的论坛源代码(三)
2006/10/09 PHP
php URL编码解码函数代码
2009/03/10 PHP
PHP的5个安全措施小结
2012/07/17 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
python实现的文件夹清理程序分享
2014/11/22 Python
python提取字典key列表的方法
2015/07/11 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python实现excel读写数据
2021/03/02 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
致跳高运动员广播稿
2014/01/13 职场文书
《老王》教学反思
2014/02/23 职场文书
机械专业求职信
2014/05/25 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
行为习惯主题班会
2015/08/14 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang