20190711-上午js显示和隐藏

最新推荐文章于 2021-02-07 22:22:06 发布
最新推荐文章于 2021-02-07 22:22:06 发布
阅读量126 收藏
点赞数 1
分类专栏： js&jquery 文章标签： js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38901340/article/details/96452188
版权

20190711-上午js显示和隐藏

                                        ——Javee

昨天晚上心血来潮，做了一个动态轮播图片的效果，可控制左右轮播，代码如下：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8" />
          <title></title>
          <style>
               *{
                    margin: 0;
                    padding: 0;
               }
               #window{
                    width: 1000px;
                    height: 300px;
                    padding: 25px 0 25px 0;
                    background-color: black;
                    margin: 30px auto;
                    box-sizing: border-box;
                    position: relative;
                    overflow: hidden;
               }
               
               #background{
                    width: 3600px;
                    position: absolute;
               }
               
               #background>img{
                    width: 400px;
                    height: 250px;
                    float: left;
               }
               #btndiv{
                    width: 200px;
                    margin: 50px auto 0;
               }
               button{
                    padding: 20px;
                    font-size: 20px;
               }

         </style>
     </head>
     <body>
          <div id="btndiv">
               <button onclick="index=-1;">向左</button>
               <button onclick="index=1;">向右</button>
          </div>
          <div id="window" onmouseover="stop();"  onmouseout="move();">
               <div id="background" style="left: -1200px;">
                    <img src="img/1.jpg" />
                    <img src="img/2.jpg" />
                    <img src="img/3.jpg" />
                    <img src="img/1.jpg" />
                    <img src="img/2.jpg" />
                    <img src="img/3.jpg" />
                    <img src="img/1.jpg" />
                    <img src="img/2.jpg" />
                    <img src="img/3.jpg" />
               </div>
          </div>
          <script>
               index = -1;
               function move(){
                    var node =  document.querySelector("#background");
                    var left = parseInt(node.style.left);
                    
                    if(index == -1 && Math.abs(left) >=  2400) left = -1200;
                    if(index == 1 && Math.abs(left) <= 0)  left = -1200;
                    left += index;
                    
                    node.style.left = left + "px";
                    
                    mymove = requestAnimationFrame(move);
               }
               var mymove = requestAnimationFrame(move);
               
               function stop(){
                    cancelAnimationFrame(mymove);
               }
               
          </script>
     </body>
</html>

实现的效果如下图（鼠标放在图片上就会停止，移开继续轮播）：

display和visibility的异同点：

    visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征，虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

visibility属性：

确定元素显示还是隐藏；

visibility="visible|hidden"，visible显示，hidden隐藏。

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

display属性:

就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

block:

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。

inline:

将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。

none:

最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <style>
               #dvd1, #dvd2{
                    width: 300px;
                    height: 400px;
                    float: left;
                    color: white;
                    font-size: 5em;
                    text-align: center;
                    line-height: 400px;
               }
               #dvd1{
                    background-color: #0088FF;
               }
               #dvd2{
                    background-color: greenyellow;
               }
               .btn{
                    padding: 20px;
                    color: white;
                    background-color: mediumvioletred;
                    border: none;
                    margin-top: 20px;
                    font-size: 2em;
                    border-radius: 10px;
                    cursor: pointer;
                    text-align: center;
                    width: 300px;
                    box-sizing: border-box;
               }
               #btn{
                    position: absolute;
                    top: 400px;
               }
          </style>
     </head>
     <body>
          <div id="dvd1">11111</div>
          <div id="dvd2">22222</div>
          <div id="btn" onselectstart="return false">        <!-- 这行代码是禁止div里面的元素被复制 -->
               <div onclick="toggle()" class="btn">display控制蓝色区域显示或隐藏</div>

              <div onclick="toggle2()"  class="btn">visbility控制蓝色区域显示或隐藏</div>
          </div>
          
          <script>
               function toggle(){
                    var dvd1 =  document.querySelector("#dvd1");                  
                    var view = dvd1.style.display;
                    if(view == "") dvd1.style.display =  "none";
                    else dvd1.style.display = "";
               }
               function toggle2(){
                    var dvd1 =  document.querySelector("#dvd1");                  
                    var view = dvd1.style.visibility;
                    if(view == "" || view == "visible")     dvd1.style.visibility = "hidden";
                    else dvd1.style.visibility = "visible";
               }
          </script>
     </body>
</html>

树形结构：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <style>
               a{
                    text-decoration: none;
                    color: black;
               }
               a:hover{
                    color: red;
               }
               
               h5{
                    background: url("img/fold.gif")  no-repeat;
                    text-indent: 20px;
               }
               dt{
                    background: url("img/fclose.gif")  no-repeat;
                    text-indent: 20px;
                    margin-bottom: 20px;
               }
               dd{
                    background: url("img/doc.gif") no-repeat  -17px;
                    text-indent: 20px;
               }
               .view > dd{
                    display: none;
               }
          </style>
     </head>
     <body>
          <h5 id="title">树形菜单</h5>
          <ul>
               <dl id="tree1">
                    <dt><a href="javascrit:;"  onclick="toggle('tree1')">文学艺术</a></dt>
                    <dd>小说散文</dd>
                    <dd>先锋写作</dd>
                    <dd>诗词风韵</dd>
               </dl>
               <dl id="tree2">
                    <dt><a href="javascrit:;"  onclick="toggle('tree2')">贴图专区</a></dt>
                    <dd>小说散文</dd>
                    <dd>先锋写作</dd>
                    <dd>诗词风韵</dd>
               </dl>
               <dl id="tree3">
                    <dt><a href="javascrit:;"  onclick="toggle('tree3')">房产论坛</a></dt>
                    <dd>小说散文</dd>
                    <dd>先锋写作</dd>
                    <dd>诗词风韵</dd>
               </dl>
               <dl id="tree4">
                    <dt><a href="javascrit:;"  onclick="toggle('tree4')">娱乐八卦</a></dt>
                    <dd>小说散文</dd>
                    <dd>先锋写作</dd>
                    <dd>诗词风韵</dd>
               </dl>
          </ul>
          <script>
               function toggle(dlId){
                    var node =  document.getElementById(dlId);
                    if(node.className == ""){
                         node.className = "view";
                    }else{
                         node.className = "";
                    }
               }
          </script>
     </body>
</html>

 

Javee-Y
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 实现轮播图~
TempleTem的博客
12-26 269
轮播图初识 轮播图，图片旋转器，滑片，无论你怎么叫这玩意，它在网络上无处不在。轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它的身影~ 前端玩家轮播图那必然是当家技能~ 首先面对需求，我们需要了解轮播图应实现的功能： 基本功能 ● 自动无缝滚动 ● 左右按钮控制滚动 ● 点击圆点切换图片 成品案列 鼠标未触及区域时（自动滚动中） 鼠标触及区域后 （停止滚动，显示按钮） 整...
js代码实现轮播图
11-20
本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下 又从头到尾把轮播图研究了一遍，感觉理解更深刻了。 就怕自己搞不懂，分析了各个步骤的思路，为啥用，怎么用。 总算搞清楚了。 话不多说，干货奉上. 效果图： //1，左右按钮初始隐藏 鼠标进入box 按钮显示 鼠标离开box 按钮隐藏 //获取元素 var box = document.getElementById('box'); var leftbtn = document.getElementById('leftbtn'); var rigbtn = document.getElementById('rigbtn');
js之轮播图的实现
domino~~的博客
08-19 650
js之轮播图的实现 在很多的网页或者是手机app上都可以看到图片轮播这个功能，我最早接触到的js的一个小功能就是轮播图的实现。废话不多说，直入主题，我们要实现轮播首先要注意的就是我们要实现无缝轮播，图片在切换的切换的过程中设置轮播时如果要实现四...
新手友好，纯js+css+html带小图提示的简单轮播图
Hida_Baru的博客
04-27 342
话不多说，效果如下。 简单的解释一下我这个轮播图的原理 将5张图片放入一个宽度为4200px的div中每张图片的宽度设计为600px，而div放入一个宽度为600px的div中，所以一次只能显示一张图片。而且5张图片是连在一起的，只要修改图片距右边的距离就可以改变图片，这5张图片是紧密的连接在一起的，相当于改变了1张很长的图片（5张图片连接）的聚焦的位置。 而小图显示其实也是一个轮播图，原理类似...
JavaScript基础---图片轮播
阿木木的博客
07-23 110
轮播先把所有图片遍历出来，然后隐藏，需要用谁的时候谁再出现就行了。这个轮播没用动态绑定仅供参考 <!DOCTYPE html> <html> <head> <title>轮播图</title> <style type="text/css"> div{ width: 500px; height: 400px; margin: 50px auto; overflow: hidden; posit
vue.js使用v-if实现显示与隐藏功能示例
10-18
在实际开发中，还可以配合`v-else`和`v-else-if`来实现更复杂的逻辑判断，或者与`v-show`指令一起使用，`v-show`虽然也能实现类似的隐藏和显示功能，但它并不像`v-if`那样销毁和重建DOM元素，而是通过CSS的`display`...
03-隐藏显示二维码-js.html
02-15
03-隐藏显示二维码-js.html
VUE元素的隐藏和显示（v-show指令)
08-30
VUE元素的隐藏和显示（v-show指令） 在 Vue 框架中，元素的隐藏和显示是一个非常常见的需求，而 v-show 指令正是为了满足这个需求而生的。v-show 指令可以根据条件来控制元素的显示或隐藏，它是一个非常有用的指令...
javascript实现显示和隐藏div方法汇总
10-23
本文章通过几个简单的实例告诉你如何来实例关于隐藏与显示div层及关闭层与隐藏的区别分析哦，有需要的同学可以参考一下本文章。
Javascript显示和隐藏ul列表的方法
10-23
主要介绍了Javascript显示和隐藏ul列表的方法,涉及javascript针对页面元素遍历及显示与隐藏的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
原生JS实现隐藏显示图片 JS实现点击切换图片效果
10-19
主要为大家详细介绍了原生JS实现隐藏显示图片，JS实现点击切换图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript手撕代码 —— 实现轮播图效果
火星基地
10-26 571
要求： 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理 图片播放的同时，下面小圆圈模块跟随一起变化 点击小圆圈，可以播放相应图片 鼠标不经过轮播图，轮播图也会自动播放图片 鼠标经过，轮播图模块，自动播放停止 实现效果： 代码实现： autoPlay.html（复制并保存为html文件，打开即可见效果）： <!DOCTYPE html> <html lang="en"> <head> <m
原生js实现轮播图
yanchenxi313761的博客
06-07 354
原生js简单轮播图    实现原理： 一系列大小相等的图片平铺，利用css布局，只显示其中一张图片，其它图片隐藏。通过偏移量来实现滑动，或者手动点击来实现滑动。
【练习】js实现两种轮播图效果
weixin_46303867的博客
07-26 162
js轮播图隐藏式轮播图滑动式轮播图结语 隐藏式轮播图 <html> <head> <meta charset="utf-8"> <title>轮播特效</title> <script src="js/jquery.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} img{display: block;} #b
js轮播图简单方式
qq_35779070的博客
06-14 137
js轮播图简单方式 直接上代码吧 <script type="text/javascript"> // 当图片在同一个位置时可以用的轮播 $(function(){ // 设置初始索引为0 var step = 0; // 设置当前列表中第一张图片显示，其余隐藏 $(".sliders .item:not(:first-child)").hide(); // 改变图片方法 function changeImg(a){ // 设置当前显示的图片
JavaScript-最基础的带按钮轮播图
jacksonCya，Hello My World
12-19 945
预览： 首先在HTML和CSS下构造一下界面 HTML代码部分 <!-- 轮播图片部分--> <div id='banner' class="div1"> <img src="images/ad-01.jpg" alt="" id='bg1'> <img src="images/ad-02.jpg" alt="" id='bg2' class...
原生js实现轮播图——小肉包
小肉包的博客
01-18 3471
使用原生js实现轮播图——小肉包 今天分享一个使用原生JS实现轮播图的案例，并且配上比较详细的过程讲解，欢迎小伙伴的浏览和批评指正。静态效果图如下： 核心思想 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。 步骤： 1. 首先搭建基本的HTML结构 <!-- 结构部分 --> <!-- 结构说明：外层一个container盒子，用于放图片盒子（imgBox）、左箭头、右箭头、底部小圆圈， 图片盒子中放的是轮播的图片 --> <di
js+html+css之PC端轮播图
chen__cheng的博客
02-07 241
功能预览 实现步骤 搭建静态框架 轮播图实现核心在于：设置图片盒子ul相对于父盒子div的left数值 基于以上原理，需要先将图片显示在一条线上，实现左浮动的效果 鼠标经过以及离开注册事件 当鼠标经过的时候，设置注册事件，显示左右图标，并移除定时器（其中，定时器实现轮播图的自动播放效果） 当鼠标离开的时候，设置注册事件，隐藏左右图标，并设置定时器。 ...
js原生实现轮播图（一）
白玉梁的专栏
05-15 879
轮播图一般包含两部分，即需要轮播的图片，和底部的指示器，那么首先，自然是h5+css布局： html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co
v-show点击显示和隐藏
最新发布
04-20
v-show 是 Vue.js 框架中用来控制 HTML 元素的显示和隐藏的指令。你可以将 v-show 指令添加到 HTML 元素中，并将其绑定到某个变量或表达式上，只有当变量或表达式的值为 true 时，对应的 HTML 元素才会显示；当变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值