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 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
详解原生js实现offset方法
Jun 15 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
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
5.PHP的其他功能
2006/10/09 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
自我评价的写作规则
2014/01/06 职场文书
小学敬老月活动方案
2014/02/11 职场文书
岗位聘任书范文
2014/03/29 职场文书
学习普通话的体会
2014/11/07 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
我的生日感言
2015/08/03 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server