分层导航
<!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; 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; 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; 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; 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); 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>