JS实现“隐藏与显示”功能(多种方法)

高洛峰

发布时间：2016-12-05 13:28:46

1376人浏览过

来源于php中文网

原创

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

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

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

通过按钮实现隐藏和显示

通过点击按钮实现隐藏和显示

欢迎来到我的博客Jaxzm!

目前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。

了解

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

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

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

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

代码如下：





通过定时实现隐藏和显示





Jaxzm欢迎您的访问
此茶虽未饮，未闻，我心自生香.


Jaxzm欢迎您的访问

网趣网上购物系统旗舰版

网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。

下载

注意在这个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方法来实现，通过切换实现隐藏与显示；效果如下：

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

通过jQuery实现展开收缩

通过jQuery代码实现隐藏和显示

欢迎来到我的博客Jaxzm!

目前我在学习GoF的设计模式，你想了解么？想要了解的话，请点击按钮。

了解

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

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

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

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

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





鼠标控制动画展开







原生js实现tooltip提示框的效果

2016年11月13日 

摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
比如这个tooltip的效果展示： 这个便是tooltip提示框的... 全文


摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
比如这个tooltip的效果展示： 这个便是tooltip提示框的效果。
工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。
您可以有以下两种方式添加工具提示（tooltip）：
通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。
锚的 title 即为工具提示（tooltip）的文本。
默认情况下，插件把工具提示（tooltip）设置在顶部。 

收起全文





原生js实现tooltip提示框的效果

2016年11月13日 

摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
比如这个tooltip的效果展示： 这个便是tooltip提示框的... 全文


摘要: 在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。
前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。
比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。
比如这个tooltip的效果展示： 这个便是tooltip提示框的效果。
工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。
您可以有以下两种方式添加工具提示（tooltip）：
通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。
锚的 title 即为工具提示（tooltip）的文本。
默认情况下，插件把工具提示（tooltip）设置在顶部。 

收起全文