人类 在浏览网页时或者翻转页面时，总是 会就这样看 到很多惟妙惟肖 的效果的效果。其中 ，抽屉式网页效果比较常见，它主要由图片和文字通过添加浪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;
（ 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 毫秒。
效果图：
关注微信