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 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 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
PHP操作XML作为数据库的类
2010/12/19 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
vue实现放大镜效果
2020/09/17 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python自定义解析简单xml格式文件的方法
2015/05/11 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python实现手机销售管理系统
2019/03/19 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
店长岗位职责
2013/11/21 职场文书
创业资金计划书
2014/02/06 职场文书
初三学习决心书
2014/03/11 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Python中第三方库Faker的使用详解
2022/04/02 Python
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL