前端|手风琴--抽屉式网页特效

问题描述

我们在浏览网页时或者翻转页面时，经常会看到很多精美的效果的效果。其中，抽屉式网页效果比较常见，它主要由图片和文字通过添加js来实现。抽屉式网页通过移动鼠标来实现页面的切换，通过改变文字和图片而展现不同的界面，它非常实用而且实现简单。

解决方案

制作抽屉式页面时，主要会用到HTML，CSS和JavaScript。

（1）通过div来规定主要内容部分占据的大小，并通过CSS来修正。

（2）使用overflow标签，使得多余的图片部分隐藏。

（3）通过js来实现图片的移动。

制作过程：

（1）为网页添加背景图片，并定义一个容器wrap来规定网页主要内容的大小和它占据的位置，如图1所示。

<div id="wrap">

</div>

 

 

*{

         margin:  0;

         padding:  0;

}

body{

         background:  url(img/sfq4.jpg) center top no-repeat;

}

#wrap{

         width:  1090px;

         height:  429px;

         margin:  150px auto;

         border:  1px solid red;

}

图1

（2）在wrap里面添加ul列表，在列表中添加主要内容的图片和文字，并为之设置CSS效果。使用overflow属性规定当内容溢出元素框时发生的事情。在这里可以使用overflow:hidden，它一般用在固定宽高的div里面，目的是隐藏溢出使内部元素高度即使超过父元素也能够被隐藏；此外，overflow:hidden另一个流行的用途是用在没有宽高的div里，其目的是清除浮动。

<div id="wrap">

                          <ul>

                                   <li  style="background-image: url(img/手风琴5.jpg);">

                                            <div>

                                                     <p>我的个人浪漫之旅 || 美丽之约</p>

                                            </div>

                                   </li>

                                   <li  style="background-image: url(img/sfq1.jpg);">

                                            <div>

                                                     <p>我的个人浪漫之旅 || 美丽之约</p>

                                            </div>

                                   </li>

                                   <li  style="background-image: url(img/sfq6.jpg);">

                                            <div>

                                                     <p>我的个人浪漫之旅 || 美丽之约</p>

                                            </div>

                                   </li>

                                   <li  style="background-image: url(img/sfq2.jpg); width: 789px;">

                                            <div>

                                                     <p>我的个人浪漫之旅 || 美丽之约</p>

                                            </div>

                                   </li>

                          </ul>

                  </div>

#wrap{

         width:  1090px;

         height:  429px;

         margin:  150px auto;

         overflow:  hidden;//保障图片在随鼠标移动时不会发生错位

}

#wrap ul{

         width:  120%;

}

#wrap ul li{

         list-style:  none;

         width:  100px;

         height:  429px;

         float:  left;

        

}

#wrap ul li .txt{

         width:  100px;

         height:  429px;

         background:  rgba(0,0,0,0.5);

         overflow:  hidden;

}

#wrap ul li p{

         padding:  0.5px 42px;

         background:  rgba(0,0,0,0.5);

         color:  white;

         font-family:  "楷体";

         font-size:  14px;

}

为了使图片和文字在同一水平面上，用float属性来清除浮动，并且用rgba属性来为文字改变颜色和透明度。rgba是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写，颜色值取0至250；透明度取值在0到1之间，数值越小则越透明。

（3）引入jquery文件，并添加js效果。

<script src="shoufq.js" type="text/javascript"  charset="utf-8"></script>

         <script  src="jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>

         <script  type="text/javascript">

                  $('@wrap  ul li').hover(function(){

                          $(this).stop().animate({

                                   width  : '789px'

                          },500).siblings().stop().animate({

                                   width  : '100px'

                          },500);

                  });

         </script>

添加的js代码中，$('@wrap ul li').hover表示鼠标移上图片时，被选中的图片宽度变为789px，用时500毫秒。其他的图片则用siblings来表示，它们的宽度在鼠标移上时变为100px，用时也是500毫秒。

效果图：

图2

图3

本篇文章是通过网上视频教学来完成的，在其中加入了我自己认为的重点和理解，如有错误还请指正。

END

实习主编 | 王楠岚

责编 | 江南沐雪