【WEB】抽屉式网页特效

最新推荐文章于 2024-05-30 11:22:04 发布

编程鹿子

最新推荐文章于 2024-05-30 11:22:04 发布

阅读量2.1k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_49473712/article/details/107688694

版权

本文介绍了如何使用HTML、CSS和JavaScript实现抽屉式的网页特效。通过规定div大小，使用overflow隐藏多余内容，结合jQuery实现鼠标悬停时图片和文字的动画切换。详细步骤包括设置背景图片、CSS样式，以及添加js效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

解决方案

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

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

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

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

制作过程：

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

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

<ul>

<div>

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

</div>

</li>

<div>

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

</div>

</li>

<div>

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

</div>

</li>

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

$('@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 毫秒。

效果图：