网页设计鼠标显示div_「WEB」 抽屉式网页特效

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

解决方案

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

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

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

(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 表示鼠标移上图片时，被选中的图片宽度变为 789px ，用时 500 毫秒。其他的图片则用 siblings 来表示，它们的宽度在鼠标以上时变为 100px ，用时也是 500 毫秒。

效果图：

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