WEB抽屉式网页特效分享

人类 在浏览网页时或者翻转页面时。总是 会就这样看 到很多惟妙惟肖 的效果的效果。其中 。抽屉式网页效果比较常见。它主要由图片和文字通过添加浪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: " 楷体 &#34

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 毫秒。

效果图：

您还感兴趣的文章推荐

• 十大帅哥明星排行榜 全球颜值排名前十男2021
• 好用的睫毛膏十大排行榜10强 大家用过最好用的睫毛膏
• 最帅的人是谁 第一名 2020全球最帅100人完整排行榜
• 全球最帅的男人排行榜 盘点历届全球最性感男人今昔对比照
• 搞笑韩剧排行榜前十名 浪漫搞笑爱情喜剧韩剧

以上就是由互联网推广工程师 网创网 整理编辑的，如果觉得有帮助欢迎收藏转发~