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 特性,(当你付诸实践时)将使你的页面 ...
随机推荐
- Class Abstraction -- Object Interfaces
<?php /* PHP 5 introduces abstract classes and methods. Classes defined as abstract may not be in ...
- P1090 合并果子
#include <bits/stdc++.h> using namespace std; const int maxn = 10005; int main(int argc, char ...
- java override
java override // 覆盖父类的方法,在子类直接调用子类内部这个方法时 public class TestCalc{ protected static class Wine{ String ...
- 利用堆排序找出数组中前n大的元素
#include <stdio.h> #include <stdint.h> #include <stdlib.h> #include <time.h> ...
- mssql全文索引
在使用全文索引的时候例如: SELECT [PRID] ,[PRCode] ,[PRDesc] FROM [test1].[dbo].[PerformanceIssue] where contains ...
- pod》error:The dependency `` is not used in any concrete target
内容提要: podfile升级之后到最新版本,pod里的内容必须明确指出所用第三方库的target,否则会出现The dependency `` is not used in any concrete ...
- TCP connection status
A TCP connection progresses through a series of states during its lifetime. The following diagram il ...
- 【python】RGB图片到灰度图的转换
在做立体匹配求深度图的时候遇到这个问题,用惯了matlab的rgb2gray,倒是不熟悉python的实现,在网上找到了相关方案,记下来已作备用 RGB到灰度图转换公式: Y' = 0.299 R + ...
- 数据写入文本文件并读出到浏览器的PHP代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- oracle 存储过程基础
create or replace procedure update_CarryoverArchivers(bizsysname in varchar, year in number de ...