搜尋
首頁web前端js教程javascript手工製作懸浮菜單_javascript技巧

有選擇性的重複造一些輪子,未必是件壞事。 Aaron的部落格上加了一個懸浮菜單,看起來看起來很高大上了。雖然這類小把戲也不是頭一次見了,但從未自己寫過。今天就選擇性的拿這個功能寫一寫。以下是這個輪子的開發過程,也可以當作是一篇需求文件的分析與實作過程。

示範網址:http://sandbox.runjs.cn/show/to8wdmuy

原始碼下載:https://github.com/bjtqti/floatmenu

第一步建立dom節構:

複製程式碼 程式碼如下:




   
    AppCarrier
   


   

             

test1


             

The past can hurt. But you can either run from it or learn from it


             

過去是痛苦的,但你要麼逃避,要麼從中成長


             

One meets his destiny on the road he takes to avoid it


             

常在逃避命運的路上,卻與之不期而遇


             

Rules are meant to be broken


             

規則就該被打破。


             

Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.


             

歲月流逝只令容顏蒼老,且激情不再卻使心靈枯萎。


             

test2


             

只有不斷地練習學到的知識,而你才能真正掌握它。


             

Live every day to the fullest.


             

享有每日。


             

Keep your eyes on the stars, and your feet on the ground.


             

志存高遠,且腳踏實地。


             

Always be up for an unexpected adventure.


             

隨時準備開始一場意外冒險吧。


             

Life is full of disappointment. You can't dwell on things. You have to move on.


             

生活常不如意,且不沉溺往事,且要勇往直前。


             

I'm a free spirit. I can't be caged.


             

我的靈魂是自由的,且不該被束縛。


             

Sometimes the heart sees what is invisible to the eye.


             

目不見者,且心可感之


             

The simple things are also the most extraordinary things, and only the wise can see them.


             

最平凡的事也是最不凡的事,且只有智者才明白。


             

test3


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

test4


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


             

how many xxxxxx


   

   



第二步準備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                 addClass(links[0]);
                return;
            }
            //最後一條
            if(scrollTop>=pos[len-1]){
                addClass(links[len-1]);
                return;
            }
            //中間
            for(;i                 if(scrollTop > pos[i] && scrollTop                     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. 實現自動跳到指定節

          這一步驟可以利用標籤的錨功能來做,由於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章,以此類推。

                 關於🎜>

                    相同的,且滾動條的高度,我也是簡單的用了document.body.scrollTop來獲取,如果換成jquery的話,應當是$(win).scroll;

                   繪圖的功能是將抽象的問題具體化,並幫助我們思考,找出規律。也許稱為「建模」會顯得高大上一些吧。

                    所強調的為在陣列1與陣列2中的關係應為一一對應的。如對應的是

           2.3 第三種狀況,且直接進入頁面時的選單狀態指示。例如透過index.html#h3這樣的地址進來,選單中的h3要反白顯示。

    3.  實現懸浮選單的顯示與隱藏動畫。

        3.1  這一步驟應是較簡單的,且可考慮先做。利用css3的tramsform屬性就可以了,簡單高效,跨瀏覽器的話,注意兼容。

      注意transform : translate3d(x軸, y軸, z軸); 用3d是可以利用硬體加速,增加動畫效果,但是功耗會增加,善用!第一個參數是控制左右方向,如果為正,表示向右移動,如果為負則向左移動。這麼說其實是不嚴謹的,實際上要根據參考點來確定,例如元素的靜止時的x座標是0,那麼增加x的值向右,減少為向左,0為重設。

    分析完後,就是寫程式了。這沒有什麼好說的。盡情享受敲擊鍵盤產生的樂感。

    寫完之後,預覽一下,點選選單,跳入指定章節,同時點選項目變紅色,刷新目前頁面,依賴顯示正確。滑動一下滾輪,選單項目隨著內容的變化而相應的變化,拖曳一下滾動條,也是這樣,最後點擊一下隱藏,選單縮回去,點擊顯示,選單滑出來。這樣懸浮功能就做完了。

以上就是本文的全部內容了,希望大家能夠喜歡。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

20+道必知必会的Vue面试题(附答案解析)20+道必知必会的Vue面试题(附答案解析)Apr 06, 2021 am 09:41 AM

本篇文章整理了20+Vue面试题分享给大家,同时附上答案解析。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版