标签：gre center isp pos on() 添加 ret format nbsp
这里默认使用jquery
1.菜单栏中鼠标滑过某菜单出现子菜单
子菜单默认隐藏，鼠标滑过菜单栏，出现子菜单栏，代码如下：
1 <!-- 2 Author: XiaoWen 3 Create a file: 2017-02-27 11:24:01 4 Last modified: 2017-02-27 17:16:06 5 Start to work: 6 Finish the work: 7 Other information: 8 --> 9 <!DOCTYPE html> 10 <html lang="en"> 11 <head> 12 <meta charset="UTF-8"> 13 <title>Document</title> 14 <style> 15 *{margin: 0;padding: 0; 16 } 17 #nav{background: #eee;width: 600px; height: 40px;margin: 0 auto; 18 } 19 ul{ 20 list-style:none; 21 } 22 ul li{ 23 float: left; 24 line-height: 40px; 25 text-align: center; 26 position: relative; 27 } 28 a{ 29 text-decoration: none; 30 color: #000; 31 display: block; 32 padding: 0 10px; 33 height: 40px; 34 } 35 a:hover{ 36 color: #fff; 37 background: #666; 38 } 39 ul li ul li{ 40 float: none; 41 background: #eee; 42 margin-top: 2px; 43 } 44 ul li ul{ 45 position: absolute; 46 left: 0; 47 top: 40px; 48 } 49 ul li ul li a{ 50 width: 80px; 51 } 52 ul li ul li a:hover{ 53 background: #06f; 54 } 55 ul li ul{ 56 display: none; 57 } 58 ul li:hover ul{ 59 /* display: block; */ 60 } 61 </style> 62 </head> 63 <body> 64 <div id="nav"> 65 <ul> 66 <li><a href="#">一级菜单1</a></li> 67 <li><a href="#">一级菜单2</a></li> 68 <li> 69 <a href="#">一级菜单3</a> 70 <ul> 71 <li><a href="#">二级菜单1</a></li> 72 <li><a href="#">二级菜单2</a></li> 73 <li><a href="#">二级菜单3</a></li> 74 </ul> 75 </li> 76 <li><a href="#">一级菜单4</a></li> 77 <li><a href="#">一级菜单5</a></li> 78 <li><a href="#">一级菜单6</a></li> 79 </ul> 80 </div> 81 <script src="http://code.jquery.com/jquery.js"></script> 82 <script> 83 // $ 等于 jQuery 84 // $(function(){}) 等于 $(document).ready(function(){}) 85 // 表示整个文档加载完成后再执行相应的函数。 86 $(function(){ 87 // 选择器 > 表示子元素 88 $(‘#nav>ul>li‘).mouseover(function(){ 89 // children 只获取子元素，不获取孙元素 90 $(this).children(‘ul‘).show() 91 }) 92 $(‘#nav>ul>li‘).mouseout(function(){ 93 $(this).children(‘ul‘).hide() 94 }) 95 }) 96 </script> 97 </body> 98 </html>
这里主要使用两个事件mouseover鼠标滑过和mouseout鼠标离开。并添加对应的方法。
图1
图1为效果图
2.返回顶部按钮
在页面右下方添加一个返回顶部按钮，当页面滑到一定位置时，按钮出现，否则消失，默认隐藏
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .content{ width: 100%;height: 500px; background:green; overflow: hidden; } 8 #back-to-top{ position: fixed; right: 50px;bottom: 10%; width: 44px;height: 44px; text-align: center; display: none; cursor: pointer;} 9 #back-to-top a:hover{ color: #fff; } 10 </style> 11 <script src="js/jquery-1.7.2.min.js"></script> 12 </head> 13 <body> 14 <div class="content"></div> 15 <div class="content"></div> 16 <div class="content"></div> 17 <div id="back-to-top"><a href="#" title="返回顶部"><img src="images/top.png" width="44" height="44"></a></div> 18 <script> 19 $(function(){ 20 $(‘#back-to-top‘).hide(); 21 $(function(){ 22 $(window).scroll(function(){ 23 if($(window).scrollTop()>100){ 24 $(‘#back-to-top‘).fadeIn(100); 25 }else{ 26 $(‘#back-to-top‘).fadeOut(100); 27 } 28 }); 29 $(‘#back-to-top‘).click(function(){ 30 $(‘body,html‘).animate({scrollTop:0},300) 31 return false; 32 }) 33 }) 34 }) 35 </script> 36 </body> 37 </html>
.fadeIn() 设置图标淡出延迟， .fadeOut()设置图标淡入（隐藏）延迟。这里要注意两者不要弄反了，初学者往往容易因为out和in的字面意思，弄反该方法的意思。
在给该图标添加一个click事件。
标签：gre center isp pos on() 添加 ret format nbsp
原文地址：http://www.cnblogs.com/vvlc/p/7103769.html
