HTML5 CSS3 精美案例 ： 实现VCD包装盒个性幻灯片

}

#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.useragentman.com/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();