FORGOT YOUR DETAILS?

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;
}

在线演示


让链接同时具备两种打开方式
获取源码: Horizontal Menu With Accordian
下载数:48人次, 文件大小: 1.8 MB, 上传日期: 2020年-11月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

1,133 人查阅

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付





 

TOP

获取源码,用于学习交流。记得 B站/点赞 /投币/转发 非常谢谢!

一键获取本站点所有源码