html5 css3实现一个精美vcd包装盒个性幻灯片案例

swmozowtfl · *发表于* 2015-7-10 22:25:26

先看下html：
代码如下:
<!doctype html public -//w3c//dtd html 4.01 transitional//en
>
<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>
<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是最外层容器，给它设置了一个背景；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: -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() 这个矩阵变形这个网站提供在线设计矩阵
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>
重置的css我就不贴了，下面我把源码提供给大家下载。

更多网页制作信息请查看：网页制作

effoggikeftor · *发表于* 2015-9-12 22:03:28

k了我一个月的站，刚才site的时候

buingeEvineus · *发表于* 2015-9-12 22:04:09

这个程序有没有漏洞啊

Mqokjdvq · *发表于* 2015-9-12 22:05:02

女人啊真是那句话~~~无理占三分~~忘记怎么说了呵呵 ~~你帮我想想

mwxny · *发表于* 2015-10-22 10:19:51

看你快沉底了~~~~~~

buingeEvineus · *发表于* 2015-10-22 10:19:55

极品可以说是让你馨香满腹，三日不绝！！古人说的好：想要作文章，先要学做人。由作者的文章我们也可以揣测出作者定是成长在一个汗牛充栋，文化氛围浓厚而且精神面貌积极向上的幸福家庭里面。在现在这个物欲横流，亲情冷淡的时代，能够在这样的家庭里

alapScady · *发表于* 2015-10-22 10:20:57

楼猪.重量级人物阿.

wwzcdenleclv · *发表于* 2015-10-22 10:21:03

对于这种刚发的帖子，我总是毫不犹豫的顶了。如果火了就是个前排，可以混个脸熟，说不定谁好心就给粉了…稳赚不赔；如果沉了就感觉是我弄沉的，很有成就感，还能捞经验。

wwzcdenleclv · *发表于* 2015-10-22 10:21:04

今天没事来逛逛

html5 css3实现一个精美vcd包装盒个性幻灯片案例

回复|共 8 个

回复

浏览过的版块

快捷导航