JavaScript----分层导航 滚动事件
分层导航
<!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>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#apDiv1 {
position: fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
left: auto;
top: auto;
bottom: auto;
width: 237px;
height: auto;
z-index: 2;
margin-top: -8px;
margin-left: 40px;
text-align: center;
font-size: 16px;
font-family: "黑体";
color: #965D28;
background-image: url(../img/bg.png);
}
#menu {
display: none;
}
.daohang div {
height: 30px;
z-index: 2;
margin: 0 auto;
text-align: center;
padding-top: 5px;
overflow: hidden;
padding-top: 10px;
color: 965D28;
}
.daohang div:hover {
height: 30px;
z-index: 2;
margin: 0 auto;
background-image: url(../img/menu-hover.png);
text-align: center;
overflow: visible;
color: #fff;
}
.daohang li {
margin-left: 237px;
list-style-type: none;
background-color: #D3A23A;
width: 160px;
line-height: 30px;
color: #422B1D;
position: relative;
top: -40px;
background-image: url(../img/bg.jpg);
border: solid thin;
border-color: #965D28;
z-index: 1;
}
.daohang li:hover {
margin-left: 237px;
list-style-type: none;
background-color: #D3A23A;
width: 160px;
line-height: 50px;
color: #fff;
position: relative;
top: -40px;
border: solid thin;
border-color: #965D28;
background-image: url(../img/bg.png);
z-index: 1;
}
.daohang a:link, a:visited {
text-decoration: none;
color: #965D28;
}
.daohang a:hover {
text-decoration: none;
color: #fff;
}
</style>
</head> <body>
<script>
function menuvisible()
{
$("nav").slideToggle(1500);/*开关*/
}
</script>
<div id="apDiv1" > <img src="n0.jpg" width="80" />
<nav id="menu">
<div class="daohang" style=" background-color:#630"> <a href="index.html">
<div style=" background-color:#FC0; color:#fff">首页 </div>
</a> <a href="about us.html" target="_blank">
<div>关于我们 </div>
</a> <a href="services.html" target="_blank">
<div>咖啡文化 </div>
</a> <a href="price list.html" target="_blank">
<div>价格清单 </div>
</a> <a href="contact.html" target="_blank">
<div>联系我们 </div>
</a> </div>
</nav>
<div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
<input style="color:#fff; border:none; width:100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
</div>
<div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP </a> </div>
</div>
<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 />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
咖啡
</body>
</html>
滚动事件
<!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>
*{ margin:0px; padding:0px;}
body{ background-image:url(1.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:contain;}
</style>
</head> <body>
<p id="pp" style="position:fixed;">0</p>
<div style="background-image:url(3.jpg); width:1024px; height:700px; position:relative; top:500px; left:0px;"></div> <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 /> </body>
</html>
<script>
var a =document.getElementById("pp");
window.onscroll=function (){
a.innerHTML=document.documentElement.scrollTop||document.body.scrollTop;
if(parseInt(a.innerHTML)>200)
{
document.body.style.backgroundImage="url(2.jpg)";
}
else
{
document.body.style.backgroundImage="url(1.jpg)";
}
}
</script>
JavaScript----分层导航 滚动事件的更多相关文章
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- JavaScript定位导航滚动2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- javascript滚动栏响应鼠标滑轮的实现上下滚动事件
实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...
- Javascript实现导航锚点滚动效果实例
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页 ...
- JS-特效 ～ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎
ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为 ...
- js监听网页页面滑动滚动事件，实现导航栏自动显示或隐藏
/** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...
- JavaScript目录菜单滚动反显组件的实现
JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...
- 7、网页制作Dreamweaver（悬浮动态分层导航）
悬浮动态分层导航的制作: 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) <script language="javas ...
- JavaScript 与 CSS 滚动实现最新指南
一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱.我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,(当你付诸实践时)将使你的页面 ...
随机推荐
- vi 整行 多行 复制与粘贴
vi编辑器中的整行(多行)复制与粘贴就非常必要了. 1.复制 1)单行复制 在命令模式下,将光标移动到将要复制的行处,按“yy”进行复制: 2)多行复制 在命令模式下,将光标移动到将要复制的首行处,按 ...
- Nginx 常用全局变量 及Rewrite规则详解
每次都很容易忘记Nginx的变量,下面列出来了一些常用 $remote_addr //获取客户端ip $binary_remote_addr //客户端ip(二进制) $remote_port //客 ...
- xcode 路径
$(SRCROOT)宏和$(PROJECT_DIR)宏 XCode环境变量及路径设置 分类: Objective-C2013-03-11 12:30 41336人阅读 评论(1) 收藏 举报 一般我们 ...
- pylint window下安装与使用
简介 Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准(Pylint 默认使用的代码风格是 PEP 8)和有潜在问题的代码. Pylint ...
- 【Swing】Swing初步认知
AWT(abstract Window Toolkit) AWT是java发布的第一个图形界面库.AWT通过调用系统本地的库,来创建和显示控件. AWT 的组件都是使用的native code来编写的 ...
- 解析const
const在函数前与函数后的区别 一 const基础 如果const关键字不涉及到指针,我们很好理解,下面是涉及到指针的情况: int b = 500; ...
- ArcGIS中的坐标系定义与转换 (转载）
原文:ArcGIS中的坐标系定义与转换 (转载) 1.基准面概念: GIS中的坐标系定义由基准面和地图投影两组参数确定,而基准面的定义则由特定椭球体及其对应的转换参数确定,因此欲正确定义GIS系统坐 ...
- ArcGIS API for Silverlight 加载google地图
原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...
- boost::circular_buffer
boost::circular_buffer的push_back分析 circular_buffer为了效率考虑,使用了连续内存块保存元素 使用固定内存,没有隐式或者非期望的内存分配 快速在cir ...
- windows远程桌面连接树莓派
1.树莓派上需要安装xrdp(An open source remote desktop protocol(rdp) server). sudo apt-get install xrdp 远程桌面打开 ...