HTML5 CSS3完成1个精致VCD包装盒个性化幻灯片实例

日期:2020-12-11 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

哈,最先谢谢下w3cfuns的老师,嗯~

好了,这次给发夹共享1个CSS3+Javascript VCD包装盒个性化幻灯片的1个实例。

实际效果图:
 
照片切换是否很个性化,实际效果也很非常好,大伙儿能够将其应用到自身的网站上。

先看下html:

拷贝编码
编码以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta content="text/html;charset=utf⑻" http-equiv="content-type">
<link type="text/css" href="reset.css" rel="stylesheet">
<link type="text/css" href="main.css" rel="stylesheet">
<script type="text/javascript" src="../../jquery⑴.8.3.js"></script>
<script type="text/javascript" src="vcd.js"></script>
<script type="text/javascript">
$(function ()
{
vcd.init();
vcd.autoPlay();
});
</script>
</head>
<body>
<div id="vcd">
<i id="cd"></i>
<ul>
<li class="active"><a><img alt="超人回归" src="ad/1.jpg"/></a></li>
<li><a><img alt="非凡蜘蛛侠" src="ad/2.jpg"/></a></li>
<li><a><img alt="黑喑骑士:蝙蝠侠" src="ad/3.jpg"/></a></li>
<li><a><img alt="美国队长" src="ad/4.jpg"/></a></li>
<li><a><img alt="雷神托儿" src="ad/5.jpg"/></a></li>
<li><a><img alt="金刚狼" src="ad/6.jpg"/></a></li>
</ul>
<a id="wrapPager" title="超人回归" target="_blank"></a>
<div id="indexBar">
<a class="active">0</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>

</body>
</html>

能够看到div#vcd是最外层器皿,给它设定了1个情况;ul li 各自设定照片元素;i#cd设定情况为光盘,随后设定显示信息部位;div#indexBar中显示信息照片的数据库索引,供点一下。

CSS:

拷贝编码
编码以下:

#vcd, #vcd ul, #vcd #wrapPager
{
width: 200px;
height: 272px;
}
#vcd, #vcd ul, #vcd #wrapPager, #cd
{
background: url("images/disk.png") no-repeat 0 0;
}
#vcd
{
position: relative;
margin: 20px auto 0;
}
#vcd ul, #vcd #wrapPager, #cd
{
position: absolute;
}
#vcd ul
{
background-position: ⑵63px 3px;
}
#vcd ul li, #vcd ul li a, #vcd ul li a img
{
display: block;
width: 178px;
height: 264px;
overflow: hidden;
}
#vcd ul li
{
top: 5px;
left: 2px;
opacity: 0;
/*visibility: hidden;*/
-webkit-transition: opacity linear .6s;
/*-webkit-transition: visibility linear .6s;*/
-moz-transition: opacity linear .6s;
-ms-transition: opacity linear .6s;
transition: opacity linear .6s;
position: absolute;
}
#vcd ul li.active
{
opacity: 1;
/*visibility: visible;*/
}
#vcd #cd
{
top: 64px;
left: 78px;
width: 146px;
height: 146px;
background-position: ⑸10px 0;
-webkit-transition: left ease .4s, -webkit-transform ease 1.2s .44s;
-moz-transition: left ease .4s, -moz-transform ease 1.2s .44s;
-ms-transition: left ease .4s, -ms-transform ease 1.2s .44s;
transition: left ease .4s, transform ease 1.2s .44s;
}
#vcd #cd.switch
{
left: 120px;
-webkit-transform: rotate(2520deg);
-moz-transform: rotate(2520deg);
-ms-transform: rotate(2520deg);
transform: rotate(2520deg);
}
#vcd #wrapPager
{
display: block;
left: 0;
top: 2px;
}
#vcd #indexBar
{
top: 235px;
left: 25px;
text-align: center;
overflow: hidden;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity linear .6s;
-moz-transition: opacity linear .6s;
-ms-transition: opacity linear .6s;
transition: opacity linear .6s;
position: absolute;
}
#vcd:hover #indexBar
{
opacity: 1;
visibility: visible;
}
#vcd #indexBar a
{
display: inline-block;
margin: 0 4px;
height: 0;
width: 0;
border: 4px #9f9f9f solid;
border-radius: 100%;
text-indent: ⑵00px;
overflow: hidden;
}
#vcd #indexBar a:hover, #vcd #indexBar a.active
{
width: 4px;
height: 4px;
border-color: #05c7fe;
border-width: 2px;
}

针对CSS大伙儿能够照着敲1下,针对部位的合理布局关键便是依靠position:relative和position:absolute;随后大伙儿会发现应用CSS3的过渡和形变:transition和transform 我简易提1下:

1、transition : left 1s ease 0s ;

主要参数1:必须过渡实际效果的特性,能够为单独特性:width,left等,还可以设定为all。

主要参数2:过渡的不断時间

主要参数3:过渡的速度动漫,这个大伙儿有兴趣爱好能够查查,便是先慢后快,匀速之类的。

主要参数4:过渡刚开始的延时刻间

transition也适用以下写法:

transition-property:border, color , text-shadow ;

transition-duration:2s , 3s , 3s ;

2、transform适用几种形变

transform:scale(0.5) 放缩

transform:rotate(90deg)转动90度

transform:skew(10deg 2deg)斜切,矩形框转换为平行4边形

transform:matrix() 这个引流矩阵形变 http://www.useragentman.com/matrix/ 这个网站出示线上设计方案引流矩阵

transform:translate(40px 20px)平移

列外出示了:transform-origin:20% 20%;用于改动形变实际效果的起始点,默认设置为关键

自然大家这个事例用的是转动,也就无需改动形变实际效果起始点了。


最终是JS:

拷贝编码
编码以下:

/**
* Created with JetBrains WebStorm.
* User: zhy
* Date: 14⑹⑴5
* Time: 中午6:26
* To change this template use File | Settings | File Templates.
*/
var vcd = {
/**
* 变量定义
*/
ID_VCD: "vcd",
ID_INDEXBAR: "indexBar",
ID_CD: "cd",
CLASS_ACTIVE: "active",
CLASS_CD_SWITCH: "switch",
currentIndex: 0,
isRunning: false,
timer: null,
init: function ()
{
/**
* 原始化数据信息与恶性事件
*/
vcd.vcd = $("#" + vcd.ID_VCD);
vcd.cd = $("#" + vcd.ID_CD);
vcd.imgs = $("li", vcd.vcd);
vcd.indexBar = $("#" + vcd.ID_INDEXBAR);
vcd.vcd.mouseover(function (event)
{
clearInterval(vcd.timer);
});
vcd.vcd.mouseout(function ()
{
vcd.autoPlay();
})
;
$("a", vcd.indexBar).click(vcd.dotClick);
},
/**
* 按钮点一下切换
* @param event
*/
dotClick: function (event)
{
//假如当今动漫还在运作,则立即回到
if (vcd.isRunning)return;
vcd.isRunning = true;
$("a", vcd.indexBar).removeClass(vcd.CLASS_ACTIVE);
$(this).addClass(vcd.CLASS_ACTIVE);
vcd.currentIndex = $(this).text();
vcd.cd.addClass(vcd.CLASS_CD_SWITCH);
setTimeout(vcd.resetDotClick, 1500);
event.preventDefault();//阻拦a的默认设置自动跳转网页页面
},
/**
* 当cd动漫完毕后,升级照片
*/
resetDotClick: function ()
{
vcd.cd.removeClass(vcd.CLASS_CD_SWITCH);
vcd.imgs.removeClass(vcd.CLASS_ACTIVE);
vcd.imgs.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);
vcd.isRunning = false;
},
autoClick: function ()
{
var as = $("a", vcd.indexBar);
vcd.currentIndex++;
if (vcd.currentIndex == as.length)
{
vcd.currentIndex = 0;
}
as.removeClass(vcd.CLASS_ACTIVE);
as.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);
vcd.cd.addClass(vcd.CLASS_CD_SWITCH);
setTimeout(vcd.resetDotClick, 1500);
},
/**
* 全自动播发
*/
autoPlay: function ()
{
vcd.timer = setInterval(function ()
{
vcd.autoClick();
}, 3000);
}
}
;

单例的写法,界定了1个目标,随后客户根据vcd.init() ;vsd.autoPlay()启用、

拷贝编码
编码以下:

<script type="text/javascript">
$(function ()
{
vcd.init();
vcd.autoPlay();
});
</script>

重设的css我就不贴了,下面我把源代码出示给大伙儿免费下载。
点一下免费下载源代码