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 特性,(当你付诸实践时)将使你的页面 ...
随机推荐
- Amoeba基本配置
Amoeba安装及读写分离配置一.amoeba简介官网:http://docs.hexnova.com/amoeba/index.html二.Centos下安装jdk1.yum 安装1.6版本jdk2 ...
- 【转】配置 VS 2015 开发跨平台手机应用
为了使用 VS 2015 开发跨平台手机应用,VS 2015 装了很多次,遇到了很多坑,才终于弄明白怎样配置才能正常使用C#开发手机应用,现把步骤分享给大家,以免大家少走弯路. 运行环境: Windo ...
- java笔记--关于线程同步（5种同步方式）【转】
为何要使用同步? java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查), 将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完 ...
- Ubuntu 14.04 在桌面上双击运行shell 脚本文件
http://askubuntu.com/questions/465531/how-to-make-a-shell-file-execute-by-double-click up vote7down ...
- 【Android测试】【第二节】ADB——无线模式
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4635782.html 啰嗦两句啊.本来以为adb ...
- Subset---poj3977（折半枚举+二分查找）
题目链接:http://poj.org/problem?id=3977 给你n个数,找到一个子集,使得这个子集的和的绝对值是最小的,如果有多种情况,输出子集个数最少的: n<=35,|a[i]| ...
- Selenium2学习-020-WebUI自动化实战实例-018-获取浏览器窗口位置大小
在 UI 自动化测试过程中,每个机器上浏览器的默认大小.默认位置不尽相同,需要截图的时候,页面元素可能显示不完全,因而我们需要知道浏览器的宽度,或者直接在启动浏览器时,设置浏览器的宽度或位置(此文暂不 ...
- 我的工具箱之Putty
这是类似于SecureCrt的终端仿真软件,个人感觉比SecureCrt差一点. 下载地址是:http://pan.baidu.com/s/1sko0GrF SecureCrt网址在我的工具箱之Sec ...
- [收藏夹整理]VC部分
c++多线程(一) C++11 多线程 鸡啄米:C++编程入门系列之十二(类与对象:面向对象设计的基本思想和特点) 鸡啄米:C++编程入门系列之二十一(C++程序设计必知:类的静态成员) [笔记]VS ...
- @MyBatis中的if...else...
<select id="selectSelective" resultMap="xxx" parameterType="xxx"> ...