javascript手工制作悬浮菜单_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:34:27

javascript手工制作悬浮菜单_javascript技巧

javascript手工制作悬浮菜单_javascript技巧:有选择性的重复造一些轮子，未必是件坏事。Aaron的博客上加了一个悬浮菜单，貌似显得很高大上了。虽然这类小把戏也不是头一次见了，但是从未自己写过。今天就选择性的拿这个功能写一写。下面是这个轮子的开发过程，也可以当作是一篇需求文档的分析和实现过程

推荐度：

点击下载本文 文档为doc格式

导读javascript手工制作悬浮菜单_javascript技巧:有选择性的重复造一些轮子，未必是件坏事。Aaron的博客上加了一个悬浮菜单，貌似显得很高大上了。虽然这类小把戏也不是头一次见了，但是从未自己写过。今天就选择性的拿这个功能写一写。下面是这个轮子的开发过程，也可以当作是一篇需求文档的分析和实现过程

有选择性的重复造一些轮子，未必是件坏事。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

test4

how many xxxxxx

隐藏

test1

test2

test3

test4

第二步准备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 < 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);