Rumah >hujung hadapan web >Tutorial H5 >HTML5 CSS3 精美案例 -实现VCD包装盒个性幻灯片的详情
HTML5 CSS3 精美案例 -实现VCD包装盒个性幻灯片的详情
- 黄舟asal
- 2017-03-09 16:32:591661semak imbas
HTML5 CSS3 精美案例 -实现VCD包装盒个性幻灯片的详情
效果图：
图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。
先看下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-8" 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-1.8.3.js"></script>
<script type="text/javascript" src="vcd.js"></script>
<script type="text/javascript">
$(function ()
{
vcd.init();
vcd.autoPlay();
});
</script>
</head>
<body>
<p 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>
<p 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>
</p>
</p>
</body>
</html>
可以看到p#vcd是最外层容器，给它设置了一个背景；ul li 分别设置图片元素；i#cd设置背景为光盘，然后设置显示位置；p#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: -263px 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: -510px 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: -200px;
overflow: hidden;
}
#vcd #indexBar a:hover, #vcd #indexBar a.active
{
width: 4px;
height: 4px;
border-color: #05c7fe;
border-width: 2px;
}
对于CSS大家可以照着敲一下，对于位置的布局主要就是依赖position:relative和position:absolute;然后大家会发现使用CSS3的过渡和变形：transition和transform 我简单提一下：
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)斜切，矩形转化为平行四边形
transform:matrix() 这个矩阵变形 http://www.php.cn/ 这个网站提供在线设计矩阵
transform:translate(40px 20px)平移
例外提供了：transform-origin：20% 20%；用于修改变形效果的起点，默认为重点
当然我们这个例子用的是旋转，也就不用修改变形效果起点了。
最后是JS：
/**
* Created with JetBrains WebStorm.
* User: zhy
* Date: 14-6-15
* 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);
}
}
;
单例的写法，定义了一个对象，然后用户通过vcd.init() ;vsd.autoPlay()调用、
<script type="text/javascript">
$(function ()
{
vcd.init();
vcd.autoPlay();
});
</script>Atas ialah kandungan terperinci HTML5 CSS3 精美案例 -实现VCD包装盒个性幻灯片的详情. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解Artikel seterusnya：HTML5/CSS3 经典案例-无插件拖拽上传图片（一）