javascript手工制作懸浮菜單
有選擇性的重復(fù)造一些輪子，未必是件壞事。Aaron的博客上加了一個(gè)懸浮菜單，貌似顯得很高大上了。雖然這類(lèi)小把戲也不是頭一次見(jiàn)了，但是從未自己寫(xiě)過(guò)。今天就選擇性的拿這個(gè)功能寫(xiě)一寫(xiě)。下面是這個(gè)輪子的開(kāi)發(fā)過(guò)程，也可以當(dāng)作是一篇需求文檔的分析和實(shí)現(xiàn)過(guò)程。
演示地址：http://sandbox.runjs.cn/show/to8wdmuy
源碼下載：https://github.com/bjtqti/floatmenu
第一步創(chuàng)建dom節(jié)構(gòu)：
<!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>過(guò)去是痛楚的，但你要么逃避，要么從中成長(zhǎng)</p>
<p>One meets his destiny on the road he takes to avoid it</p>
<p>往往在逃避命運(yùn)的路上，卻與之不期而遇</p>
<p>Rules are meant to be broken</p>
<p>規(guī)則就該被打破。</p>
<p>Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.</p>
<p>歲月流逝只令容顏蒼老，激情不再卻使心靈枯萎。</p>
<h1 id="test2">test2</h1>
<p>只有不斷地練習(xí)學(xué)到的知識(shí)，你才能真正掌握它。</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>志存高遠(yuǎn)，腳踏實(shí)地。</p>
<p>Always be up for an unexpected adventure.</p>
<p>隨時(shí)準(zhǔn)備開(kāi)始一場(chǎng)意外冒險(xiǎn)吧。</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>目不見(jiàn)者，心可感之</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>
第二步準(zhǔn)備css文件：
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
/*文章內(nèi)容區(qū)*/
#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;
}
第三步開(kāi)始編寫(xiě)js代碼：
(function(doc){
//收集各章節(jié)的鏈接位置
var pos = [],
//收集菜單上的項(xiàng)目
links = doc.getElementsByTagName('a'),
//收集章節(jié)的標(biāo)題
titles = doc.getElementsByTagName('h1'),
//懸浮菜單
menu = doc.getElementById('menubar'),
//當(dāng)前選擇項(xiàng)
currentItem=null;
//添加紅色樣式
var addClass = function (element){
currentItem && currentItem.removeAttribute('class');
element.setAttribute('class','red');
currentItem = element;
},
//網(wǎng)頁(yè)被卷去的高:
getScrollTop = function (){
return Math.ceil(document.body.scrollTop)+1;
},
//計(jì)算滾動(dòng)位置
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;
}
}
};
//點(diǎn)擊列表中的鏈接變色
menu.onclick=function(e){
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() === 'a'){
//列表項(xiàng)狀態(tài)指示
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';
}
}
}
//計(jì)算各章節(jié)的初始位置
var ln = titles.length;
while(--ln>-1){
//titles[len].offsetParent.offsetTop = 0;
pos.unshift(titles[ln].offsetTop);
}
startScroll();
//監(jiān)聽(tīng)滾動(dòng)
window.onscroll = function(){
startScroll()
}
})(document);
分析:
1. 實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)到指定節(jié)
這一步可以利用<a>標(biāo)簽的錨功能來(lái)做，由于html5以后不支持name 屬性(HTML5 不支持。規(guī)定錨的名稱(chēng)。)，所以考慮用ID來(lái)跳轉(zhuǎn)。
2. 標(biāo)識(shí)懸浮菜單中的項(xiàng)屬于左邊內(nèi)容中的哪個(gè)章節(jié)。
這一步是難點(diǎn)，先簡(jiǎn)單分析一下：
2.1 第一種情況，就是人為點(diǎn)擊菜單項(xiàng)。這個(gè)很容易，只要標(biāo)識(shí)點(diǎn)擊的元素就可以了。
2.2 第二種情況，通過(guò)鼠標(biāo)中鍵滾動(dòng)或拖動(dòng)滾動(dòng)條，這個(gè)時(shí)候要關(guān)聯(lián)左邊內(nèi)容和右邊菜單項(xiàng)，這是最難的地方?？紤]分步實(shí)施，先易后難，各各擊破的策略。
2.2.1 先收集標(biāo)題元素的坐標(biāo)高度。也就是所有的h1標(biāo)簽的垂直高度。存入數(shù)組1.
2.2.2 收集菜單項(xiàng)中的a元素，存入數(shù)組2.
2.2.3 監(jiān)聽(tīng)滾動(dòng)事件，判斷當(dāng)前內(nèi)容屬于哪個(gè)菜單項(xiàng)。
做一步的時(shí)候，建議在稿紙上畫(huà)一個(gè)圖：
A1
****************
* A2
*
****************
* A3
*
****************
*
* A4
*
每滾動(dòng)一次，就判斷當(dāng)前滾動(dòng)的距離是在哪一個(gè)區(qū)間，如果是0到A1則是第1章，A1到A2則是第2章,以此類(lèi)推。
關(guān)于元素的位置高度，我這里簡(jiǎn)單地用element.offsetTop來(lái)獲取，可能會(huì)存在兼容性問(wèn)題，如果用jquery來(lái)做的話(huà)，應(yīng)當(dāng)是$('element').offset().top,
同樣的，滾動(dòng)條的高度，我也是簡(jiǎn)單的用了document.body.scrollTop來(lái)獲取，如果換成jquery的話(huà)，應(yīng)當(dāng)是$(window).scrollTop();
畫(huà)圖的作用是把抽象的問(wèn)題具體化，幫助我們思考，找出規(guī)律。也許稱(chēng)為“建模”會(huì)顯得高大上一些吧。
需要強(qiáng)調(diào)的是數(shù)組1和數(shù)組2中的關(guān)系應(yīng)當(dāng)是一一對(duì)應(yīng)的。如<a href="#h1">對(duì)應(yīng)的是<h1 id="h1">。
2.3 第三種情況，直接進(jìn)入頁(yè)面時(shí)的菜單狀態(tài)指示。比如通過(guò)index.html#h3這樣的地址進(jìn)來(lái)，菜單中的h3應(yīng)當(dāng)要突出顯示。
3. 實(shí)現(xiàn)懸浮菜單的顯示和隱藏動(dòng)畫(huà)。
3.1 這一步應(yīng)當(dāng)是比較簡(jiǎn)單的，可以考慮先做。利用css3的tramsform屬性就可以了，簡(jiǎn)單高效，跨瀏覽器的話(huà)，注意兼容。
注意transform : translate3d(x軸, y軸, z軸); 用3d是可以利用硬件加速，增加動(dòng)畫(huà)效果，但是功耗會(huì)增加，善用！第一個(gè)參數(shù)是控制左右方向，如果為正，則表示向右移動(dòng)，如果為負(fù)則向左移動(dòng)。這么說(shuō)其實(shí)是不嚴(yán)謹(jǐn)?shù)模瑢?shí)際上應(yīng)當(dāng)根據(jù)參考點(diǎn)來(lái)確定，比如元素的靜止時(shí)的x坐標(biāo)是0，那么增加x的值向右，減少為向左，0為復(fù)位。
分析完之后，就是編寫(xiě)代碼了。這沒(méi)有什么好說(shuō)的。盡情享受敲擊鍵盤(pán)產(chǎn)生的樂(lè)感吧。
寫(xiě)完之后，預(yù)覽一下，點(diǎn)擊菜單，跳入指定章節(jié)，同時(shí)點(diǎn)擊項(xiàng)變紅色，刷新當(dāng)前頁(yè)面，依賴(lài)顯示正確?；瑒?dòng)一下滾輪，菜單項(xiàng)隨著內(nèi)容的變化而相應(yīng)的變化，拖動(dòng)一下滾動(dòng)條，也是這樣，最后點(diǎn)擊一下隱藏，菜單縮回去，點(diǎn)擊顯示，菜單滑出來(lái)。這樣懸浮功能就做完了。
以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- 簡(jiǎn)單實(shí)現(xiàn)js懸浮導(dǎo)航效果
- JS控制彈出懸浮窗口(一覽畫(huà)面)的實(shí)例代碼
- JS實(shí)現(xiàn)兼容性好,自動(dòng)置頂?shù)奶詫殤腋」ぞ邫谛Ч?/a>
- JS實(shí)現(xiàn)自動(dòng)固定頂部的懸浮菜單欄效果
- js+cookies實(shí)現(xiàn)懸浮購(gòu)物車(chē)的方法
- js實(shí)現(xiàn)鼠標(biāo)懸浮給圖片加邊框的方法
- js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法
- js QQ客服懸浮效果實(shí)現(xiàn)代碼
- js 左右懸浮對(duì)聯(lián)廣告特效代碼
- js實(shí)現(xiàn)3d懸浮效果
相關(guān)文章
![淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]](http://img.jbzj.com/images/xgimg/bcimg0.png)
淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]
javascript函數(shù)劫持，也就是老外提到的javascript hijacking技術(shù)。最早還是和劍心同學(xué)討論問(wèn)題時(shí)偶然看到的一段代碼2008-02-02
不同js異步函數(shù)同步的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇不同js異步函數(shù)同步的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
js判斷輸入框不能為空格或null值的實(shí)現(xiàn)方法
下面小編就為大家分享一篇js判斷輸入框不能為空格或null值的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法
下面小編就為大家?guī)?lái)一篇Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
在知道的key的情況下遍歷map自然就跟數(shù)組一樣的訪(fǎng)問(wèn)羅，這里就不說(shuō)了，示例如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
移動(dòng)端開(kāi)發(fā)時(shí),H5長(zhǎng)頁(yè)面在iOS系統(tǒng)中滑動(dòng)時(shí),當(dāng)頁(yè)面滑動(dòng)到頂部或底部時(shí),頁(yè)面還能夠上滑或下滑,手指離開(kāi)屏幕后回彈,這就時(shí)橡皮筋效果,這篇文章主要給大家介紹了關(guān)于iOS微信H5頁(yè)面橡皮回彈效果的相關(guān)資料,需要的朋友可以參考下2021-07-07
下面小編就為大家?guī)?lái)一篇詳談JS中數(shù)組的迭代方法和歸并方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
下面小編就為大家?guī)?lái)一篇去除字符串左右兩邊的空格(實(shí)現(xiàn)代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
你真的知道setTimeout是如何運(yùn)行的嗎？這篇文章主要介紹了setTimeout運(yùn)行方式，感興趣的小伙伴們可以參考一下2016-08-08