提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

基于jquery的手风琴图片展示效果实现方法

jQuery方法 实现 基于 图片 效果 展示 手风琴
2023-06-13 09:15:36 时间

本文实例讲述了基于jquery的手风琴图片展示效果实现方法。分享给大家供大家参考。具体实现方法如下：

代码运行效果如下图所示：

index.html页面代码如下：

复制代码代码如下:

<!DOCTYPEhtml>
<htmlclass="">
<head>
   <title>一款基于jquery的手风琴图片展示效果demo</title>
   <styleclass="cp-pen-styles">
       div
       {
           -moz-box-sizing:border-box;
           box-sizing:border-box;
       }
       
       html,body,.page-container
       {
           height:100%;
           overflow:hidden;
       }
       
       .page-container
       {
           -webkit-transition:padding0.2sease-in;
           transition:padding0.2sease-in;
           padding:80px;
       }
       .page-container.opened
       {
           padding:0;
       }
       .page-container.opened.flex-container.country:not(.active)
       {
           opacity:0;
           -webkit-flex:0;
           -ms-flex:0;
           flex:0;
       }
       .page-container.opened.flex-container.country:not(.active)div
       {
           opacity:0;
       }
       .page-container.opened.flex-container.active:after
       {
           -webkit-filter:grayscale(0%)!important;
           filter:grayscale(0%)!important;
       }
       
       .flex-container
       {
           display:-webkit-flex;
           display:-ms-flexbox;
           display:flex;
           height:100%;
       }
       @mediaalland(max-width:900px)
       {
           .flex-container
           {
               -webkit-flex-direction:column;
               -ms-flex-direction:column;
               flex-direction:column;
           }
       }
       
       .country
       {
           position:relative;
           -webkit-flex-grow:1;
           -ms-flex-positive:1;
           flex-grow:1;
           -webkit-flex:1;
           -ms-flex:1;
           flex:1;
           -webkit-transition:0.5sease-in-out;
           transition:0.5sease-in-out;
           cursor:pointer;
           font-family:"BreeSerif",serif;
           text-align:center;
           color:#fff;
           font-size:22px;
           text-shadow:003px#000;
       }
       .countrydiv
       {
           position:absolute;
           width:100%;
           z-index:10;
           top:50%;
           text-align:center;
           -webkit-transition:0.1s;
           transition:0.1s;
           -webkit-transform:translateY(-50%);
           -ms-transform:translateY(-50%);
           transform:translateY(-50%);
           -webkit-filter:none;
           filter:none;
       }
       .country:after
       {
           content:"";
           position:absolute;
           top:0;
           left:0;
           right:0;
           bottom:0;
           background-size:cover;
           -webkit-transition:0.5sease-in-out;
           transition:0.5sease-in-out;
           -webkit-filter:grayscale(100%);
           filter:grayscale(100%);
       }
       .country:hover
       {
           -webkit-flex-grow:6;
           -ms-flex-positive:6;
           flex-grow:6;
       }
       .country:hover:after
       {
           -webkit-filter:grayscale(0%);
           filter:grayscale(0%);
       }
       @mediaalland(max-width:900px)
       {
           .country
           {
               height:auto;
           }
       }
       
       .netherlands:after
       {
           background-image:url("Netherlands.png");
           background-position:center;
       }
       
       .belgium:after
       {
           background-image:url("belgium-307_3.jpg");
           background-position:center;
       }
       
       .france:after
       {
           background-image:url("30.jpg");
           background-position:center;
       }
       
       .germany:after
       {
           background-image:url("vacation.jpg");
           background-position:center;
       }
       
       .england:after
       {
           background-image:url("england.jpg");
           background-position:center;
       }
   </style>
</head>
<body>
   <divclass="page-container">
       <divclass="flex-container">
           <divclass="countrynetherlands">
               <div>
                   Netherlands</div>
           </div>
           <divclass="countrybelgium">
               <div>
                   Belgium</div>
           </div>
           <divclass="countryfrance">
               <div>
                   France</div>
           </div>
           <divclass="countrygermany">
               <div>
                   Germany</div>
           </div>
           <divclass="countryengland">
               <div>
                   England</div>
           </div>
       </div>
   </div>
   <scriptsrc="jquery.js"></script>
   <script>
       $(".country").click(function(){
           $(this).toggleClass("active");
           $(".page-container").toggleClass("opened");
       });//@sourceURL=pen.js
   </script>
</body>
</html>

希望本文所述对大家的jQuery特效设计有所帮助。

相关文章