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 特性,(当你付诸实践时)将使你的页面 ...
随机推荐
- ORACLE的安装与网页版创建表空间的简单操作以及PLsql的简单操作
1.oracle的安装: 安装简单易学,在这里不做解释.下载看装包后耐心等待,注意安装目录不要有中文字符,尽量按照指定目录进行安装.安装完成后会占用有大约5g的内存. 如果要卸载oracle,需要用其 ...
- java继承覆盖总结
Java基础(1) 版权声明:本文为博主原创文章,未经博主允许不得转载. java的继承与覆盖基本是java笔试中常出的题,也比较绕,我这里对java的继承覆盖做一个总结1.构造函数: ...
- 【转】C# HttpWebRequest\HttpWebResponse\WebClient发送请求解析json数据
http://blog.csdn.net/kingcruel/article/details/44036871 版权声明:本文为博主原创文章,未经博主允许不得转载. ================= ...
- docker debug diagnose
$ sudo systemctl stop docker $ sudo docker -d -D DEBU[0282] Error contacting registry https://regist ...
- SqlServer数据组织结构
page页 每个页面8KB,连续的8个页面称之为一个区extents, 如:2.18MB的一个DB的区大约有 2.18 MB (2,293,760 字节)=2,293,760b/8kb=280个页面= ...
- Windows下一个比较完美的线程池实现(使用线程池实现的Http上传下载实现)
http://blog.csdn.net/fishjam/article/details/8632049 http://download.csdn.net/user/fishjam
- 转:Windows Socket五种I/O模型
原文转自: Windows Socket五种I/O模型 Winsock 的I/O操作: 1. 两种I/O模式 阻塞模式:执行I/O操作完成前会一直进行等待,不会将控制权交给程序.套接字 默认为阻塞模 ...
- Linux下对各种压缩文件处理
Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...
- Linux GDB调试全面解析
GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,GDB主要可帮助工程师完成下面4个方面的功能: 启动程序,可以按照工程师自定义的要求随心所欲的运行程序. 让被调试的程序在工程师指定的断 ...
- [收藏夹整理]OpenCV部分
OpenCV中文论坛 OpenCV论坛 opencv视频教程目录(初级) OpenCV 教程 Opencv感想和一些分享 tornadomeet 超牛的大神 [数字图像处理]C++读取.旋转和保存bm ...