2022年 8 月 29日- (星期一) / Published in css 设计, html 设计, javascript 设计, JS 特效, 前端设计

html and css js 制作窗帘banner特色产品展示效果cid1109-前端设计

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Horizontal Accordion</title>
     
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
    
    <style>
        
        *{
            margin: 0;
            padding: 0;
            
            
        }
        body{
           overflow: hidden; 
        }
    #panles{
  width:1212px;
  height:676px;
  position: relative;
  overflow:hidden;
  background: white;
}
.panelHolder{
  float:left;
  position: relative;
  padding-right: 8px;
  width:100px;
  height:676px;
  overflow:hidden;
  background:white;
}
.contentHolder{
  float:left;
  position: relative;
  background:white;
  width:772px;
}
.tab{
  width:100px;
  position: absolute; 
  z-index: 1;
}
.model{
  position: absolute; 
  opacity: 0; 
  width:100%;
  height:676px;
}
.panelTitle.last{
  padding: 0;	
}
.active.panelHolder{
  width: 772px;
}
.active .tab{
  opacity: 0;
}
.active .model{
  visibility: visible;
  z-index: 0;
  opacity: 1;
}
    
    </style>
    
</head>

<body>
    
    <div id="panles">
        <div class="panelHolder active">
            <div class="contentHolder">
                <img src="img/2.png" class="tab">
                <a href="#"><img src="img/1.png" class="model">
                </a>
            </div>
        </div>
        <div class="panelHolder">
            <div class="contentHolder">
                <img src="img/4.png" class="tab">
                <a href="#"><img src="img/3.png" class="model">
                </a>
            </div>
        </div>
        <div class="panelHolder">
            <div class="contentHolder">
                <img src="img/6.png" class="tab">
                <a href="#"><img src="img/5.png" class="model">
                </a>
            </div>
        </div>
        <div class="panelHolder">
            <div class="contentHolder">
                <img src="img/070213-pnk-bottoms-campus-tab.png" class="tab">
                <a href="#"><img src="img/070213-pnk-bottoms-campus-model.png" class="model">
                </a>
            </div>
        </div>
        <div class="panelHolder last">
            <div class="contentHolder">
                <img src="img/8.png" class="tab">
                <a href="#"><img src="img/7.jpg" class="model">
                </a>
            </div>
        </div>
    </div>
    <<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
    <script type="text/javascript" src="scripts/slideOut.js"></script>
</body>

</html>

css

#panles{
  width:1212px;
  height:676px;
  position: relative;
  overflow:hidden;
  background: white;
}
.panelHolder{
  float:left;
  position: relative;
  padding-right: 8px;
  width:100px;
  height:676px;
  overflow:hidden;
  background:white;
}
.contentHolder{
  float:left;
  position: relative;
  background:white;
  width:772px;
}
.tab{
  width:100px;
  position: absolute; 
  z-index: 1;
}
.model{
  position: absolute; 
  opacity: 0; 
  width:100%;
  height:676px;
}
.panelTitle.last{
  padding: 0;	
}
.active.panelHolder{
  width: 772px;
}
.active .tab{
  opacity: 0;
}
.active .model{
  visibility: visible;
  z-index: 0;
  opacity: 1;
}

在线演示

让链接同时具备两种打开方式