锐客网

  1. 首页 > 生活百科 > >

WEB抽屉式网页特效分享

生活知识经验知识

人类在浏览网页时或者翻转页面时 。总是会就这样看到很多惟妙惟肖的效果的效果 。其中。抽屉式网页效果比较常见 。它主要由图片和文字通过添加浪js 来实现 。抽屉式网页通过移动鼠标来实现页面的更换。通过变化文字和图片而展现不一样的窗口。它非常实用而且实现简单 。
解决问题方案
生产抽屉式页面时 。主要会用倒忙html。css 和 javaScript。
【WEB抽屉式网页特效分享】（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;

WEB抽屉式网页特效分享

文章插图
（ 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=https://www.wangchuang8.com/"shoufq.js" type="text/javascript" charset="utf-8"/script
script src=https://www.wangchuang8.com/"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 毫秒 。
效果图：
WEB抽屉式网页特效分享

文章插图

WEB抽屉式网页特效分享

文章插图

    推荐阅读


    上一篇：支付宝有利息比较高可靠的理财卖吗 支付宝理财产品可靠吗

    下一篇：如何评价武则天丰富多彩的一生？