「WEB」 抽屉式网页特效

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

解决方案

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

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

（2）使用 overflow 标签js实现鼠标移上去显示详细信息，使得多余的图片部分隐藏。

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

制作过程：

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

*{

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 里，其目的是清除浮动。

#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 效果。

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

效果图：

如果这篇文章对你有帮助,你现在也想学习前端开发技术的话，可以关注私信我免费领取前端学习资料，观看直播课噢！（私信方法：点击我头像进我主页右上面有个私信按钮）