zoukankan      html  css  js  c++  java
  • 左右侧滑动窗口

    html代码  <!-- 左侧对比查询框 -->

        <div class="task-list-container">
          <div class="task-list">
             </div>
          <div id="arrow" class="arrow" @click="popupTaskList"></div>     </div>   <!-- 右侧对比查询框 -->   <div class="task-list-container-right">       <div class="task-list-right">                </div>       <div id="arrow-right" class="arrow-right" @click="popupTaskList_right"></div>     </div>

    js代码

     popupTaskList(event) {
            console.log(event)
            if (!this.taskListOpened) {
              this.taskListOptions = []
              this.taskListOptionsBackup = []
              this.taskListOpened = true
              event.target.parentElement.firstChild.classList.remove('task-list-close')
              event.target.parentElement.firstChild.classList.add('task-list-open')
              event.target.classList.remove('task-list-arrow-pushin')
              event.target.classList.add('task-list-arrow-popup')
              this.taskItems = []
              this.imageItems = []
            } else {
              this.taskListOpened = false
              event.target.parentElement.firstChild.classList.remove('task-list-open')
              event.target.parentElement.firstChild.classList.add('task-list-close')
              event.target.classList.remove('task-list-arrow-popup')
              
              event.target.classList.add('task-list-arrow-pushin')
              
              this.taskItems = []
            }
          },
    
          popupTaskList_right(event) {
            console.log(event)
           if (!this.taskListRightOpened) {
              this.taskListRightOptions = []
              this.taskListRightOptionsBackup = []
              this.taskListRightOpened = true
              event.target.parentElement.firstChild.classList.remove('task-list-close-right')
              event.target.parentElement.firstChild.classList.add('task-list-open-right')
              event.target.classList.remove('task-list-arrow-pushin-right')
              event.target.classList.add('task-list-arrow-popup-right')
              this.taskRightItems = []
              this.imageRightItems = []
            } else {
              this.taskListRightOpened = false
              event.target.parentElement.firstChild.classList.remove('task-list-open-right')
              event.target.parentElement.firstChild.classList.add('task-list-close-right')
              event.target.classList.remove('task-list-arrow-popup-right')
              
              event.target.classList.add('task-list-arrow-pushin-right')
              
              this.taskRightItems = []
            }
            
       

    css样式

    /* 左侧滑框 */
      .task-list-container {
        display: flex;
        position: absolute;
        left: -260px;
        top: 160px;
         540px;
        height: 550px;  
      }
    
      .task-list {
        position: absolute;
         260px;
        height: 550px;
        border-radius: 0px 4px 4px 0px;
        background: #082030;
        opacity: 0.9;
        border-radius: 0px 4px 4px 0px;
      }
    
      .arrow {
        position: absolute;
        left: 260px;
        top: 200px;
         20px;
        height: 90px;
        background: url("../assets/index/弹出.png") no-repeat;
        background-size: contain;
        opacity: 0.8;
        border-radius: 0px 6px 6px 0px;
        cursor: pointer;
      }
    
      .task-list-open {
        animation: taskListOpenAnimation 3s ease;
        left: 260px;
      }
    
      @keyframes taskListOpenAnimation {
        from {
          left: 0px;
        }
        to {
          left: 260px;
        }
      }
    
      .task-list-arrow-popup {
        animation: taskListArrowPopupAnimation 3s ease;
        left: 520px;
        background: url("../assets/index/收回.png") no-repeat;
        background-size: contain;
      }
    
      @keyframes taskListArrowPopupAnimation {
        from {
          left: 260px;
        }
        to {
          left: 520px;
        }
      }
    
      .task-list-arrow-pushin {
        animation: taskListArrowPushinAnimation 3s ease;
        left: 260px;
      }
    
      @keyframes taskListArrowPushinAnimation {
        from {
          left: 520px;
        }
        to {
          left: 260px;
        }
      }
    
      .task-list-close {
        animation: taskListCloseAnimation 3s ease;
      }
    
      @keyframes taskListCloseAnimation {
        from {
          left: 260px;
        }
        to {
          left: 0px;
        }
      }
    
    
    /* 右侧滑框 */
      .task-list-container-right {
    
        flex-direction: row-reverse; 
        display: flex;
         position: fixed; /*固定用*/
        right: -260px;
        top: 160px;
         540px;
        height: 550px;  
      }
    
      .task-list-right {
        position: absolute;
         260px;
        /* right: -100px; */
        height: 550px;
        border-radius: 0px 4px 4px 0px;
        background: #082030;
        opacity: 0.9;
        
      }
    
      .arrow-right {
        position: absolute;
        right: 260px;
        top: 200px;
         20px;
        height: 90px;
      
     </div>
  • 相关阅读:
    谈谈对Javascript构造函数和原型对象的理解
    JS 实现无缝滚动动画原理(初学者入)
    $($('.className').html( )选择器的工作原理
    jquery中attr和prop的区别
    用for循环筛选奇偶表格栏
    insertBefore 和 insetAfter函数详解
    getNextElement( )函数——获取下一个特定的元素节点
    IDEA + SSH OA 第一天(项目收获:Hibernate XML)
    IDEA + SSH OA 第一天(IDEA 文件夹类型了解)
    IDEA + SSH OA 第一天(Hibernate : Mapping (RESOURCE) not found)
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15114278.html
Copyright © 2011-2022 走看看