全国服务热线:4008-888-888

技术知识

CSS3+HTML5+JS 完成一个块的收拢与进行动☀漫实际效

近期在做新项目时,发觉CSS3中有关动漫的技术性,自身非常少应用在新项目中,平常一些目录块的收拢和进行动漫实际效果,基本上全是应用 display 的 none 和 block,或是 visibility 的 hidden 和 visible 来开展操纵。因而,在近期的新项目中,就刚开始深层次科学研究CSS3有关动漫的技术性,而且应用来到新项目中,下边是有关目录块的收拢&进行动漫。

简易的一个实际效果图

 

完成构思

大致上大家将目录块切分成 题目块 和 內容块

(1)题目块: 展现题目和一个含有收拢&进行动漫实际效果的标志

  ①标志一部分,大家可使用伪类来美术绘画出箭头符号,而且应用 transform 的转动特性 rotate 开展标志的方位操纵和其动漫实际效果

  ②动漫操纵,一般点一下题目一部分,目录则收拢&进行,因而点一下题目时,要对class开展操纵。

(2)內容块:內容块展现內容,且该块承重了关键的动漫实际效果——目录的收拢&进行

  ①动漫实际效果:该块的动漫,大家的构思是全部块的高宽比收拢来,里边的內容也向左侧掩藏,因而必须操纵高宽比和动漫的掩藏,因此应用 max-height 开展高宽比操纵和 transition(设定动漫時间)、transform 的特性 translate 来开展內容的掩藏

详细编码以下:

<!DOCTYPE html>
   <html>
   <head>
       <title></title>
       <style type="text/css">
           .block_wrap {
               width: 500px;
               margin: 0 auto;
               border: 1px solid #e3e3e3;
              border-radius: 10px;
          }
          .chapter_wrap {
              background: white;
             text-align: left;
             border-radius: 8px;
            color: #333333;
            margin-bottom: 15px;
             font-size: 14px;
           overflow: hidden;
       }
       .title_item_wrap {
             padding: 10px 10px 10px 0;
           margin: 0 10px 0 10px;
           border-bottom: none;
            display: flex;
             align-items: center;
        }
         /*应用伪类开展标志美术绘画*/
         .title_item_wrap::after {
            content: '';
            width: 10px;
             height: 10px;
             border-top: 2px solid #999999;
             border-right: 2px solid #999999;
            transform: rotate(-45deg);
            display: inline-block;
           transition: 0.3s;
            float: right;
            margin-top: 10px;
       }
        /*应用类acitve类操纵标志的转动和进行时题目的下面界*/
        .active {
             border-bottom: 1px solid #F0F0F0;
        }
        .active::after{
            transform: rotate(135deg);
            margin-top: 5px;
         }
        .chapter_title {
             font-size: 16px;
             padding: 0;
            margin: 0;
             width: calc(100% - 30px);
        }
         .node_wrap {
             overflow: hidden;
             overflow-y: scroll;
             transition: 0.3s;
         }
         .node_wrap p {
           padding: 0 20px 5px 20px;
            margin: 10px 0;
            border-bottom: 1px solid #e3e3e3
        }
        /*掩藏內容块的拖动条*/
        .node_wrap::-webkit-scrollbar {
            display: none;
        }
        /*操纵內容块掩藏 掩藏时,整块向左侧平移200%的总宽,而且将较大高宽比设定为0,不然网页页面会留出空白页*/
        .node_wrap_hide {
             transform: translate(-200%, 0);
             max-height: 0;
        }
        /*操纵內容块显示信息,显示信息时,整块向右侧还原,而且将较大高宽比设定为300px,里边的內容即会将块撑开*/
        .node_wrap_show {
            transform: translate(0, 0);
          max-height: 300px;
       }
    </style>
 </head>
 <body>
    <div class="block_wrap">
        <div id="block_wrap" class="title_item_wrap active">
            <p class="chapter_title">章节目录名字</p>
        </div>
        <div id="list_wrap" class="node_wrap node_wrap_show">
             <p>节名字一</p>
            <p>节名字二</p>
           <p>节名字三</p>
           <p>节名字四</p>
             <p>节名字五</p>
            <p>节名字六</p>
            <p>节名字七</p>
             <p>节名字八</p>
             <p>节名字九</p>
            <p>节名字十</p>
       </div>
     </div>
 </body>
 <script type="text/javascript">
     // 获得题目原素
   var block_wrap = document.getElementById('block_wrap')

    //给题目原素加上点一下恶性事件,根据点一下操纵class的加上&除去达到动漫实际效果
     block_wrap.onclick = function() {
        // 获得题目原素className结合
        let classArray = this.className.split(/\s+/)

        // 获得內容块原素
        let list_wrap = document.getElementById('list_wrap')
 
        // 分辨题目原素是不是有类active,倘若存有,则表明目录进行,这时候点一下则是掩藏內容块,不然显示信息內容块
         if (classArray.includes('active')) {
            // 掩藏內容块
            block_wrap.classList.remove('active')
             list_wrap.classList.remove('node_wrap_show')
           list_wrap.classList.add('node_wrap_hide')
             console.log(this.className.split(/\s+/))
             return
        } else {
           // 显示信息內容块
            block_wrap.classList.add('active')
            list_wrap.classList.add('node_wrap_show')
            list_wrap.classList.remove('node_wrap_hide')
            return
         }
     }
 </script>
 </html>

之上编码立即拷贝到HTML文档储存后就可以见到实际效果。此动漫实际效果适应手机端,PC端会出现点缺陷,略微解决就可以。

到此这篇有关CSS3+HTML5+JS 完成一个块的收拢与进行动漫实际效果的文章内容就详细介绍到这了,大量有关html5进行收拢动漫內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服