分层导航

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>无标题文档</title>
  7. <style>
  8. #apDiv1 {
  9.     position: fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
  10.     left: auto;
  11.     top: auto;
  12.     bottom: auto;
  13.     width: 237px;
  14.     height: auto;
  15.     z-index: 2;
  16.     margin-top: -8px;
  17.     margin-left: 40px;
  18.     text-align: center;
  19.     font-size: 16px;
  20.     font-family: "黑体";
  21.     color: #965D28;
  22.     background-image: url(../img/bg.png);
  23. }
  24. #menu {
  25.     display: none;
  26. }
  27. .daohang div {
  28.     height: 30px;
  29.     z-index: 2;
  30.     margin: 0 auto;
  31.     text-align: center;
  32.     padding-top: 5px;
  33.     overflow: hidden;
  34.     padding-top: 10px;
  35.     color: 965D28;
  36. }
  37. .daohang div:hover {
  38.     height: 30px;
  39.     z-index: 2;
  40.     margin: 0 auto;
  41.     background-image: url(../img/menu-hover.png);
  42.     text-align: center;
  43.     overflow: visible;
  44.     color: #fff;
  45. }
  46. .daohang li {
  47.     margin-left: 237px;
  48.     list-style-type: none;
  49.     background-color: #D3A23A;
  50.     width: 160px;
  51.     line-height: 30px;
  52.     color: #422B1D;
  53.     position: relative;
  54.     top: -40px;
  55.     background-image: url(../img/bg.jpg);
  56.     border: solid thin;
  57.     border-color: #965D28;
  58.     z-index: 1;
  59. }
  60. .daohang li:hover {
  61.     margin-left: 237px;
  62.     list-style-type: none;
  63.     background-color: #D3A23A;
  64.     width: 160px;
  65.     line-height: 50px;
  66.     color: #fff;
  67.     position: relative;
  68.     top: -40px;
  69.     border: solid thin;
  70.     border-color: #965D28;
  71.     background-image: url(../img/bg.png);
  72.     z-index: 1;
  73. }
  74. .daohang a:link, a:visited {
  75.     text-decoration: none;
  76.     color: #965D28;
  77. }
  78. .daohang a:hover {
  79.     text-decoration: none;
  80.     color: #fff;
  81. }
  82. </style>
  83. </head>
  84.  
  85. <body>
  86. <script> 　　
  87. function menuvisible()
  88. { 　　
  89.     $("nav").slideToggle(1500);/*开关*/　　
  90. }
  91. </script>
  92. <div id="apDiv1" > <img src="n0.jpg" width="80" />
  93.   <nav id="menu">
  94.     <div class="daohang" style=" background-color:#630"> <a href="index.html">
  95.       <div style=" background-color:#FC0; color:#fff">首页 </div>
  96.       </a> <a href="about us.html" target="_blank">
  97.       <div>关于我们 </div>
  98.       </a> <a href="services.html" target="_blank">
  99.       <div>咖啡文化 </div>
  100.       </a> <a href="price list.html" target="_blank">
  101.       <div>价格清单 </div>
  102.       </a> <a href="contact.html" target="_blank">
  103.       <div>联系我们 </div>
  104.       </a> </div>
  105.   </nav>
  106.   <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
  107.     <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-->" />
  108.   </div>
  109.   <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP </a> </div>
  110. </div>
  111. <br />
  112. <br />
  113. <br />
  114. <br />
  115. <br />
  116. <br />
  117. <br />
  118. <br />
  119. <br />
  120. <br />
  121. <br />
  122. <br />
  123. <br />
  124. <br />
  125. <br />
  126. <br />
  127. <br />
  128. <br />
  129. <br />
  130. <br />
  131. <br />
  132. <br />
  133. <br />
  134. <br />
  135. <br />
  136. <br />
  137. <br />
  138. <br />
  139. <br />
  140. <br />
  141. <br />
  142. <br />
  143. <br />
  144. <br />
  145. <br />
  146. <br />
  147. <br />
  148. <br />
  149. <br />
  150. <br />
  151. <br />
  152. <br />
  153. <br />
  154. <br />
  155. <br />
  156. <br />
  157. <br />
  158. <br />
  159. <br />
  160. <br />
  161. <br />
  162. <br />
  163. <br />
  164. <br />
  165. <br />
  166. <br />
  167. <br />
  168. <br />
  169. <br />
  170. <br />
  171. <br />
  172. <br />
  173. <br />
  174. <br />
  175. 咖啡
  176. </body>
  177. </html>

滚动事件

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. *{ margin:0px; padding:0px;}
  8. body{ background-image:url(1.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:contain;}
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <p id="pp" style="position:fixed;">0</p>
  14. <div style="background-image:url(3.jpg); width:1024px; height:700px; position:relative; top:500px; left:0px;"></div>
  15.  
  16. <br />
  17. <br />
  18. <br />
  19. <br />
  20. <br />
  21. <br />
  22. <br />
  23. <br />
  24. <br />
  25. <br />
  26. <br />
  27. <br />
  28. <br />
  29. <br />
  30. <br />
  31. <br />
  32. <br />
  33. <br />
  34. <br />
  35. <br />
  36. <br />
  37. <br />
  38. <br />
  39. <br />
  40. <br />
  41. <br />
  42. <br />
  43. <br />
  44. <br />
  45. <br />
  46. <br />
  47. <br />
  48. <br />
  49. <br />
  50. <br />
  51. <br />
  52. <br />
  53. <br />
  54. <br />
  55. <br />
  56. <br />
  57.  
  58. </body>
  59. </html>
  60. <script>
  61. var a =document.getElementById("pp");
  62. window.onscroll=function (){
  63.         a.innerHTML=document.documentElement.scrollTop||document.body.scrollTop;
  64.         if(parseInt(a.innerHTML)>200)
  65.         {
  66.             document.body.style.backgroundImage="url(2.jpg)";
  67.         }
  68.         else
  69.         {
  70.             document.body.style.backgroundImage="url(1.jpg)";
  71.         }
  72.     }
  73. </script>

JavaScript----分层导航 滚动事件的更多相关文章

  1. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  2. JavaScript定位导航滚动2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. javascript滚动栏响应鼠标滑轮的实现上下滚动事件

    实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...

  4. Javascript实现导航锚点滚动效果实例

    本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页 ...

  5. JS-特效 ～ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎

    ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为 ...

  6. js监听网页页面滑动滚动事件，实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  7. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  8. 7、网页制作Dreamweaver（悬浮动态分层导航）

    悬浮动态分层导航的制作: 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) <script language="javas ...

  9. JavaScript 与 CSS 滚动实现最新指南

    一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱.我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,(当你付诸实践时)将使你的页面 ...

随机推荐

  1. The "get" method should be used when the form is idempotent---正交的两个概念---

    https://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.1 17.13.1 Form submission method The me ...

  2. delphi动态数组指针问题

    就一个button事件 procedure TForm1.btn7Click(Sender: TObject); Type TMyArr = array of array of array of In ...

  3. HTML5 Web Storage -- 让Cookies看起来如此古老

    转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...

  4. linux命令篇

    普通用户登陆,充值root密码: sudo passwd root

  5. 【转】javascript中this的四种用法

    在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this 出现的场景 ...

  6. JavaSE的知识

    一 SE的知识体系: java基础: 一基础语法 8个基本数据类型-->8个包装类 数据类型转换: 自动转换(从小到大) 强制转换(从大到小) 注意:int 和char 分支与判断: if(){ ...

  7. zepto源码--matches--学习笔记

    zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, close ...

  8. ubuntu下的jdk安装

    软件环境: 虚拟机:VMware Workstation 10 操作系统:ubuntu-12.04-desktop-amd64 JAVA版本:jdk-7u55-linux-x64 软件下载地址: JD ...

  9. [LeetCode]题解（python）：037-Sudoku Solver

    题目来源 https://leetcode.com/problems/sudoku-solver/ Write a program to solve a Sudoku puzzle by fillin ...

  10. urlencode和rawurlencode的区别

    摘自http://blog.csdn.net/doggie1024/article/details/5698615 urlencode:返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将 ...