js實現簡單手風琴效果

本文例項為大家分享了實現手風琴效果的具體程式碼，供大家參考，具體內容如下

效果：

js實現簡單手風琴效果

實現程式碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin:0;
    padding:0;
   }
   ul,li{
    list-style:none;
   }
   .box{
    width:1200px;
    height:260px;
    margin:50px auto 0;
    overflow: hidden;
   }
   .list{
    width:2000px;
    height:260px;
   }
   .list>li{
    width:200px;
    height:260px;
    float:left;
    backgrounePChW 
d-image:url(images/1.jpg);
    background-position:center center;
    background-repeat:no-repeat;
   }
   .list>li:nth-child(2){
    background-image:url(images/2.jpg);
   }
   .list>li:nth-child(3){
    background-image:url(images/3.jpg);
   }
   .list>li:nth-child(4){
    background-image:url(images/4.jpg);
   }
   .list>li:nth-child(5){
    background-image:url(images/5.jpg);
   }
   .list>li:nth-child(6){
 www.cppcns.com 
   background-image:url(images/6.jpg);
   }
  </style>
 </head>
 <body>
  
  <div class="box">
   <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  
  <script src="js/startmove.js"></script>
  <script>
   
   var oLis = document.getElementsByClassName("list")[0].children;
   
   for(var i = 0; i < oLis.length; i++){
    oLis[i].onmouseover = function(){
     forwww.cppcns.com 
(var j = 0; j < oLis.length; j++){
      startMove(oLis[j]http://www.cppcns.com,{
       width:160
      },50)
     }
     startMove(this,{
      width:400
     },50)
    }
    oLis[i].onmouseout = function(){
     
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:200
      },10)
     }
    }
   }
   
   
  </script>
 </body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

js實現簡單手風琴效果

js實現簡單手風琴效果

js實現簡單放大鏡效果

js實現簡單日曆效果

js實現簡單進度條效果

js實現簡單的無縫輪播效果

原生JS實現彈幕效果的簡單操作指南

js實現簡單的輪播圖效果

js實現簡單圖片拖拽效果

JS實現簡單圖片輪播效果

js實現簡單的前端分頁效果

JS實現簡單的todoList（記事本）效果

JS實現簡單加減購物車效果

原生js實現簡單輪播圖效果

js實現簡單的放大鏡效果

js實現簡單輪播圖效果

js實現簡單的拖拽效果

JS實現簡單日曆特效

js實現櫥窗展示效果

js實現蒙版效果

JS實現滑動導航效果

js實現簡單手風琴效果

相關推薦