javascript手工制作悬浮菜单

作者: 关于计算机  发布:2019-09-06

有选用性的再度造一些车轮,未必是件坏事。亚伦的博客上加了八个漂移菜单,貌似显得很巨大上了。固然那类小把戏亦非头一次见了,不过未有本身写过。今天就选拔性的拿这几个意义写一写。下边是以此轮子的付出进度,也能够看成是一篇须要文书档案的剖判和促成进度。

javascript手工业塑造悬浮菜单,javascript手工业营造

有选取性的重复造一些轱辘,未必是件坏事。亚伦的博客上加了三个浮动菜单,貌似显得很巨大上了。即使那类小把戏亦非头一次见了,然而从未本身写过。后天就采取性的拿那些效能写一写。上面是其一轮子的付出进度,也足以看作是一篇须要文书档案的剖析和兑现进程。

亲自去做地址:

源码下载:

图片 1

首先步创制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和数组第22中学的关系应该是逐个对应的。如<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为重新恢复设置。

    分析完之后,正是编写制定代码了。那并未有何样好说的。尽情享用敲击键盘产生的乐感吧。

    写完事后,预览一下,点击菜单,跳入内定章节,同临时候点击项变灰绿,刷新当前页面,依赖彰显正确。滑动一下滚轮,菜单项随着剧情的扭转而相应的扭转,拖动一下滚动条,也是那样,最终点击一下逃匿,菜单缩回去,点击展现,菜单滑出来。那样悬浮功效就做完了。

以上正是本文的全体内容了,希望大家能够欣赏。

有选用性的重复造一些轱辘,未必是件坏事。亚伦的博客上加了八个上浮菜单,貌似显得非常高...

示范地址:

源码下载:

图片 2

率先步创设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和数组第22中学的关系应该是逐条对应的。如<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为重新复苏设置。

    深入分析完事后,正是编写制定代码了。那未尝怎么好说的。尽情享受敲击键盘产生的乐感吧。

    写完今后,预览一下,点击菜单,跳入钦命章节,同时点击项变红色,刷新当前页面,依赖展现精确。滑动一下滚轮,菜单项随着情节的变迁而相应的变迁,拖动一下滚动条,也是那般,最后点击一下隐形,菜单缩回去,点击彰显,菜单滑出来。那样悬浮功能就做完了。

如上就是本文的全体内容了,希望大家能够欣赏。

你也许感兴趣的稿子:

  • 简单的说完结js悬浮导航效率
  • JS调控弹出悬浮窗口(一览画面)的实例代码
  • JS达成包容性好,自动置顶的天猫悬浮工具栏效果
  • JS完结全自动定位最上部的上浮菜单栏效果
  • js+cookies达成悬浮购物车的艺术
  • js完结鼠标悬浮给图片加边框的形式
  • js鼠标悬浮出现遮罩层的办法
  • js QQ客服悬浮效果得以实现代码
  • js 左右上浮对联广告特效代码
  • js完结3d浮泛效果

本文由今晚开什么码发布于关于计算机,转载请注明出处:javascript手工制作悬浮菜单

关键词:

上一篇:没有了
下一篇:JavaScript中的分号插入机制详细介绍