<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度百科导航</title>
<style type="text/css">
body{ padding:0px; margin:0px;}
#header{ text-align:center;}
label{ font-weight:bold;}
#menu{ width:220px; height:360px; background-color:#9F3; display:none;}
#menu ul li{ margin-top:20px;}
</style>
</head>
<body>
<div id="header"><h1>百度百科导航基本原理</h1></div>
<div id="menu">
<ul>
<li>条目一</li>
<li>条目二</li>
<li>条目三</li>
<li>条目四</li>
<li>条目五</li>
<li>条目六</li>
<li style="display:none"></li>
</ul>
</div>
<br /><br />
<label>条目一</label>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<label>条目二</label>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<label>条目三</label>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<label>条目四</label>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<label>条目五</label>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<label>条目六</label>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<label> </label>
<script type="text/javascript">
var menu=document.getElementById("menu");
var mts=document.getElementsByTagName("label");
var lis=menu.getElementsByTagName("li");
for(var i=0;i<mts.length;i++){
mts.item(i).onclick=function(){alert(this.offsetTop);}
}
window.onscroll = function(){
var ht=document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<mts.length;i++){
if(mts.item(i).offsetTop<ht+100 && mts.item(i+1).offsetTop>ht+100){
lis.item(i).style.color="#f00";
lis.item(i).style.fontWeight="bold";
}else{
lis.item(i).style.color="#000";
lis.item(i).style.fontWeight="normal";
}
}
if(ht>100){
menu.style.position="fixed";
menu.style.top="100px";
menu.style.right="50px";
menu.style.display="block";
}
else{
menu.style.position="relative";
menu.style.display="none";
}
}
</script>
</body>
</html>
写道http://pan.baidu.com/s/1gdszRYr
相关推荐
在JavaScript编程领域，实现类似百度百科右侧导航特效是一项常见的需求，它可以提升用户体验，使用户在浏览长篇文章时能轻松地跳转至不同章节。本文将深入探讨如何利用JavaScript技术来创建这种导航效果。 首先，...
在"jQuery仿百度百科右侧浮动菜单特效"中，核心原理主要包括以下几个方面： 1. **DOM操作**：jQuery提供了简便的方法来选择、添加、删除或修改HTML元素。在这个特效中，我们需要先获取到页面中的所有章节标题（如`...
总的来说，"android抽屉显示百度地图"的实践项目不仅涵盖了Android UI设计的基本原理，还涉及了第三方服务的集成和地图API的使用。这对于Android开发者来说是一项有价值的技能，可以帮助他们在自己的应用中实现类似...
主要用到的API是scrollIntoView 和 getBoundingClientRect方法，原理是监听页面滚动元素，当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口，就可以标识右边的指示栏。 代码如下： <!...
5. NavBar（导航栏）：顶部导航栏，可自定义标题、返回按钮、右侧内容等。 6. Dialog（弹窗）：用于显示警告、确认、提示等信息，支持自定义内容和操作按钮。 7. Swiper（轮播图）：支持自动播放、图片懒加载、...
- **左侧/右侧区域**：根据内容需求进行布局，通常包含导航或补充信息。 - **主体内容**：根据设计主题填充相关图文信息，确保内容丰富且与主题相符。 - **源代码**：头部部分包含主要的页面结构元素，如`<div>`...
1. **左右滑动效果**：SlidingMenu支持左右两侧的滑动效果，用户可以通过从屏幕左侧或右侧滑动来显示或隐藏菜单。这为用户提供了快速访问更多功能的途径。 2. **多种滑动模式**：库提供了多种滑动模式，如"Behind...
2. **网站策划**：设计符合搜索引擎友好的网站结构，包括URL规划、导航结构、网页代码优化等，以利于搜索引擎爬虫抓取和理解。 3. **内容优化**：提供高质量、原创、与关键词相关的网站内容，同时确保内容的可读性...
首页顶部导航栏有各版块链接，左侧栏提供详细信息，右侧有三江学院的短视频。 **第三章 概要设计** 3.1 网页设计思路 - 首页采用主题图片引导，配以学校简介视频。 - 全局采用两种颜色的径向渐变作为背景（历史...
这个功能的工作原理是：当鼠标光标停留在任务栏的某个活动窗口图标上时，与该窗口相关的缩略图会在短时间内弹出。默认情况下，这个弹出的时间间隔相对较短，使得用户可以迅速预览窗口内容。 如果想要延长这个弹出...
接着，在下方的框架中再次使用frameset标签创建了一个列布局，其中左侧框架占据25%的宽度，右侧框架占据剩余的75%宽度。每个frame标签都通过src属性指定加载的HTML文件，并通过name属性给不同的框架命名。 示例代码...