“隐藏与显示”的多种方法实现

每当不经意间打开某一个页面，会发现一个出现的页面过了几秒就消失了，或者说，当你点击某个按钮，它才会出现，然后它也会提示你也可以把它关闭掉，再或者说，当你阅读了我的博客摘要后，开始有了想要阅读整篇文章的想法，于是点击阅读全文，它又以“收起全文”的模样再次出现在你的眼前。。。。这便是本篇博客的主题----隐藏与显示。

下面我将效果图展示出来：

1，通过按钮实现隐藏与显示：

这个是通过按钮点击实现的隐藏与显示，具体代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>通过按钮实现隐藏和显示</title>
 6         <style type="text/css">
 7             .body{
 8                 margin: 0 auto;
 9             }
10             #show{
11                 width: 600px;
12                 height: auto;
13                 font-size: 14px;
14                 background-color: #E4C392;
15                 display: block;
16                 padding: 10px;
17                 margin: 0 auto;
18                 border-radius: 10px;
19             }
20             #show h2{
21                 color: #11C2EE;
22                 margin: 0 auto;
23             }
24             .slide{
25                 margin: 0 auto;
26                 padding: 0;
27                 width: 600px;
28                 border-top: solid 4px #D6A55C;
29             }
30             .btn-slide{
31                 background-color: bisque;
32                 width: 80px;
33                 height:30px;
34                 text-align: center;
35                 margin: 0 auto;
36                 border-radius: 8px;
37                 margin: 0 auto;
38                 display: block;
39             }
40         </style>
41         <script type="text/javascript">
42             function divShow(){
43                 document.getElementById("btnshow").style.display="block";
44                 document.getElementById("btnhref").innerHTML ="关闭";
45                 document.getElementById("btnhref").href ="javascript:divhidden()";
46             }
47             function divhidden(){
48                 document.getElementById("btnshow").style.display="none";
49                 document.getElementById("btnhref").innerHTML ="了解";
50                 document.getElementById("btnhref").href ="javascript:divShow()";    
51             }
52         </script>
53     </head>
54     <body>
55         <div id="show">
56             <h2>通过点击按钮实现隐藏和显示</h2>
57             <hr />
58             <p>
59                 欢迎来到我的博客Jaxzm!
60             </p>
61             <p>
62                 目前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。
63             </p>
64             <div id="btnshow" style="display: none;">
65                 <p>
66                     GoF所描述的23种设计模式，总共可以分为三种类型：创建型模式，行为型模式，结构型模式。
67                 </p>
68                 <p>
69                     我觉得比较难的是创建型模式，因为它说的比较抽象，所以我不容易理解它，然后我编码也比较少，所以就不太容易理解这个。
70                 </p>
71             </div>
72         </div>
73         <p class="slide">
74             <a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a>
75         </p>
76     </body>
77 </html>

其中，主要能够实现这个功能的是js代码，

通过getElementById()这个方法找到对应元素，进而控制它的style，以此来做对应的功能。这是一个比较简单的方法。

接下来演示的是另外一种方式：

这个是通过具体的时间限制来控制其隐藏与显示，

 代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>通过定时实现隐藏和显示</title>
 6         <style type="text/css">
 7             .body{
 8                 margin: 0 auto;
 9                 padding: 0;
10                 background-color: #D6A55C;
11             }
12             #show{
13                 background-color: #E4C392;
14                 width: 700px;
15                 height: 100px;
16                 display: block;
17                 margin: 0 auto;
18                 padding: 10px;
19                 font-size: 14px;
20                 height: auto;                
21                 text-align: center;                
22             }
23 
24             #show h2{
25                 color: #3CC4A9;
26             }
27             .hid{
28                 background: #E8E8E8;
29                 text-align: center;
30                 width: 700px;
31                 height: 100px;
32                 padding: 10px 10px 0 0;
33                 margin: 0 auto;
34                 display: block;
35                 text-decoration: none;
36             }
37             
38         </style>
39         
40         <script type="text/javascript">
41             var h = 0;
42             function addH(){
43                 if(h < 400){
44                     h=h+5;
45                     document.getElementById("show").style.height = h+"px";
46                 }
47                 else{
48                     return;
49                 }
50                 setTimeout("addH()",30);
51             }
52             window.onload = function showAds(){
53                 addH();
54                 setTimeout("subH()",5000);
55             }
56             
57             function subH(){
58                 if(h >0){
59                     h -= 5;
60                     document.getElementById("show").style.height = h+"px";
61                 }
62                 else{
63                     document.getElementById("show").style.display = "none";
64                     return;
65                  }
66                 setTimeout("subH()",30);
67             }
68             
69         </script>
70     </head>
71     <body>
72             <div id="show">
73             <h2>Jaxzm欢迎您的访问</h2>
74                 <span>此茶虽未饮，未闻，我心自生香.</span>
75             </div>            
76             <div class="hid">
77                  <h1>Jaxzm欢迎您的访问</h1>
78             </div>
79                         
80         </div>
81         
82     </body>
83 </html>

注意在这个js里面的setTimeout()函数，setTimeout(function,time).更加精准地用法：

执行一段代码：
   var i=0;
   setTimeout("i+=1;alert(i)",1000);
执行一个函数：
   var i=0;
   setTimeout(function(){i+=1;alert(i);},1000);

还有一种方式就是通过jQuery方法来实现，通过切换实现隐藏与显示；效果如下：

看到它的样子，是否会觉得和第一个很像，但是也会发现它和第一个是不一样的，具体代码如下:

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>通过jQuery实现展开收缩</title>
 6         <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 7         <style type="text/css">
 8             .body{
 9                 margin: 0 auto;
10             }
11             #show{
12                 width: 600px;
13                 height: auto;
14                 font-size: 14px;
15                 background-color: #E4C392;
16                 display: block;
17                 padding: 10px;
18                 margin: 0 auto;
19                 border-radius: 10px;
20             }
21             #show h2{
22                 color: #11C2EE;
23                 margin: 0 auto;
24             }
25             .slide{
26                 margin: 0 auto;
27                 padding: 0;
28                 width: 600px;
29                 border-top: solid 4px #D6A55C;
30             }
31             .btn-slide{
32                 background-color: bisque;
33                 width: 80px;
34                 height:30px;
35                 text-align: center;
36                 margin: 0 auto;
37                 border-radius: 8px;
38                 margin: 0 auto;
39                 display: block;
40             }
41         </style>
42         <script type="text/javascript">
43             $(document).ready(function () {
44                 $(".btn-slide").click(function () {
45                     $("#btnshow").slideToggle();
46                 });
47             });
48             
49         </script>
50     </head>
51     <body>
52         <div id="show">
53             <h2>通过jQuery代码实现隐藏和显示</h2>
54             <hr />
55             <p>
56                 欢迎来到我的博客Jaxzm!
57             </p>
58             <p>
59                 目前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。
60             </p>
61             <div id="btnshow" style="display: none;">
62                 <p>
63                     GoF所描述的23种设计模式，总共可以分为三种类型：创建型模式，行为型模式，结构型模式。
64                 </p>
65                 <p>
66                     我觉得比较难的是创建型模式，因为它说的比较抽象，所以我不容易理解它，然后我编码也比较少，所以就不太容易理解这个。
67                 </p>
68             </div>
69         </div>
70         <p class="slide">
71             <a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a>
72         </p>
73     </body>
74 </html>

这段代码和第一个唯一不同的便是这个js代码：

这里首先要引入jQuery库，然后才能调用jquery库里面的方法slideToggle(),方法的具体实现如下：

当点击了按钮，它就会将显示与隐藏进行切换。

学习了以上知识之后，就可以实现博客的页面显示。但是这里还需要了解nextSibling和previousSiling这两个属性。

nextSibling 它是返回某一元素后面紧跟的元素。previousSibling 它是返回某一元素之前紧跟的元素。

  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 type="text/css">
  7         body
  8         {
  9             margin: 0 auto;
 10             padding: 0;
 11             font-size: 9pt;
 12             line-height: 180%;
 13         }
 14         
 15         #pn
 16         {
 17             background: #f8f8f8;
 18             height: auto;
 19             width: 750px;
 20             display: block;
 21             margin: 0 auto;
 22             padding: 5px;
 23         }
 24         
 25         
 26         .btn
 27         {
 28             width: 80px;
 29             height: 20px;
 30             padding: 5px 3px 5px 3px;
 31             text-align: center;
 32             text-decoration: none;
 33             background: #f0f0f0;
 34             border: 1px solid #CCC;
 35         }
 36         .content
 37         {
 38             border: 1px solid #CCC;
 39             display: none;
 40             padding: 5px;
 41         }
 42         .title
 43         {
 44             font-weight: bold;
 45             color: #3030FF;
 46             font-size:11pt;
 47         }
 48         .subtitle
 49         {
 50             color: #CCC;
 51         }
 52         .btm
 53         {
 54             text-align: right;
 55             height: 30px;
 56         }
 57     </style>
 58     <script type="text/javascript">
 59         var time = 300;
 60         var h = 40;
 61         function showdiv(obj) {
 62 
 63             //obj.parentNode.nextSibling.nextSibling.style.display = "block";
 64             var x = obj.parentNode.nextSibling;
 65             //包含众多空格作为文本节点，因此在我们使用nextSibling和previousSibling时就会出现问题。
 66             //因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。
 67             //当上一节点或者是下一节点为文本节点时，就继续寻找，直到找到下一个元素节点。
 68             //  其中nodeType的值主要有以下几种：
 69             // 
 70             // 元素节点的nodeType值为1
 71             // 属性节点的nodeType值为2
 72             // 文本节点的nodeType值为3
 73             if (x.nodeType != 1) {
 74                 x = x.nextSibling;
 75             }
 76             x.style.display = "block";
 77             obj.parentNode.style.display = "none";
 78 
 79         }
 80         function hidediv(obj) {
 81 
 82             obj.parentNode.parentNode.style.display = "none";
 83             var x = obj.parentNode.parentNode.previousSibling;
 84             if (x.nodeType != 1) {
 85                 x = x.previousSibling;
 86             }
 87             x.style.display = "block";
 88         }
 89         
 90     </script>
 91 </head>
 92 <body>
 93     <div id="pn">
 94         <div>
 95             <p class="title">
 96                                           原生js实现tooltip提示框的效果</p>
 97             <p class="subtitle">
 98                 2016年11月13日 </p>
 99             <p>
100                       摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
101                       前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
102                       比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
103                       比如这个tooltip的效果展示： 这个便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a>
104             </p>
105             <div class="content">
106                 <p>摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
107                          前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
108                                                               比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
109                                                               比如这个tooltip的效果展示： 这个便是tooltip提示框的效果。</p>
110                <p>工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。
111                    您可以有以下两种方式添加工具提示（tooltip）：
112                 <p>通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。
113                 锚的 title 即为工具提示（tooltip）的文本。</p>
114                 默认情况下，插件把工具提示（tooltip）设置在顶部。 </p>
115                 <div class="btm">
116                     <a href="#" class="btn" onclick="hidediv(this);">收起全文</a>
117                 </div>
118         </div>
119         <hr />
120         <div>
121             <p class="title">
122                                           原生js实现tooltip提示框的效果</p>
123             <p class="subtitle">
124                 2016年11月13日 </p>
125             <p>
126                       摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
127                       前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
128                       比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
129                       比如这个tooltip的效果展示： 这个便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a>
130             </p>
131             <div class="content">
132                 <p>摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
133                          前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
134                                                               比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
135                                                               比如这个tooltip的效果展示： 这个便是tooltip提示框的效果。</p>
136                <p>工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。
137                    您可以有以下两种方式添加工具提示（tooltip）：
138                 <p>通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。
139                 锚的 title 即为工具提示（tooltip）的文本。</p>
140                 默认情况下，插件把工具提示（tooltip）设置在顶部。 </p>
141                 <div class="btm">
142                     <a href="#" class="btn" onclick="hidediv(this);">收起全文</a>
143                 </div>
144         </div>
145     </div>
146 </body>
147 </html>
Reading

效果如下:

是否感觉似曾相识？

其实以上方法具体实现起来都是比较简单的。实用性也比较大。

 

posted @ 2016-11-24 16:40  Seraphjin  阅读(1428)  评论(0)  编辑  收藏  举报