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 特性,(当你付诸实践时)将使你的页面 ...
随机推荐
- empty($w)
<?php $w = ''; var_dump(empty($w)); $w = ' '; var_dump(empty($w)); $w = 0; var_dump(empty($w)); v ...
- java编程算法
一.字符串相关操作 String s = " Hello java,hello android,hello OOP,HELLO String,hello JAVASE!"; Sys ...
- 已禁用对分布式事务管理器(MSDTC)的网络访问。请使用组件服务管理工具启用 DTC 以便在 MSDTC 安全配置中进行网络访问。
今天写ASP.NET程序,在网页后台的c#代码里写了个事务,事务内部对一张表进行批量插入,对另外一张表进行查询与批量插入. 结果第二张表查询后foreach迭代操作时报错:已禁用对分布式事务管理器(M ...
- FTS抓包看L2CAP Connection的建立（一）
一.概述 在前面的文章中介绍了inquiry和ACL connection的建立过程.这个连接建立后,L2CAP signaling channel(CID = 0x0001)就已经存在,可以 ...
- cwe
- 使用SVN提示“工作副本已经锁定”的解决办法
更新或者提交前执行一下clean up.如果在当前目录执行该命令后,仍然提示锁定,就到上一层目录再执行下...
- Qt获取组合键
CTRL+Enter发送信息的实现 在现在的即时聊天程序中,一般都设置有快捷键来实现一些常用的功能,类似QQ可以用CTRL+Enter来实现信息的发送. 在QT4中,所有的事件都继承与QEvent这个 ...
- C++ 线程类的一个实现
.h #ifndef CTHREAD_H_ #define CTHREAD_H_ #include "plat.h" class CThread { public: enum { ...
- jade编译乱码问题
加上: meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
- java对象中继承和变量初始化顺序浅析
先上例子代码 public class F { int age = 5; public F() { print(); } public void print() { System.out.printl ...