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


哈,首先感谢下w3cfuns的老师,嗯~

好了,这次给发夹分享一个CSS3+Javascript 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>
<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() 这个矩阵变形 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();
}, 3000);
}
}
;

单例的写法,定义了一个对象,然后用户通过vcd.init() ;vsd.autoPlay()调用、

复制代码
代码如下:

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

重置的css我就不贴了,下面我把源码提供给大家下载。
点击下载源码



相关阅读:
jQuery遍历页面所有CheckBox查看是否被选中的方法
win10右下角的图标隐藏了怎么设置全部显示?
javascript 操作符(~、&、|、^、<<、>>)使用案例
常用的Javascript数据验证插件
纯CSS实现设置半个字符的样式
基于第一个PhoneGap(cordova)的应用详解
javascript计算当月剩余天数(天数计算器)示例代码
Android 实现旋转木马的音乐效果
解决Windows 7下安装Oracle 11g相关问题的方法
C#实现两个窗体之间数值传送的方法
jquery实现input输入框实时输入触发事件代码
win10系统如何快速清理垃圾?win10清理系统垃圾方法介绍
C++设计模式编程中的观察者模式使用示例
jquery对dom节点的操作【推荐】
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 南昌-大连 奉化-伊春 新昌-白山 杭州-武安 崇明-昌都 府谷-神木 包头-昭通 朝阳-晋城 广安-滨州 抚州-贺州 武汉-德宏 鹰潭-信阳 朝阳-新余 毕节-东莞 德州-平湖 奉化-阿坝 包头-招远 常德-垦利 洛阳-郫县 桓台-宿迁 朝阳-梅州 大石桥-西宁 株洲-通辽 喀什-孝感 绵阳-三河 伊犁-廊坊 庆阳-锦州 聊城-石家庄 辽阳-兖州 海宁-凉山 三亚-巴中 义乌-黄石 四会-海门 克拉玛依-怒江 吉安-凉山 嵊州-酒泉 徐州-拉萨 莱州-中山 神木-晋中 德宏-双流 绥化-阳江 运城-攀枝花 温州-嘉兴 三河-嘉善 吉林-普兰店 昆明-临安 珠海-南昌 桐庐-大连 咸宁-庆阳 咸阳-桂林 曲靖-朔州 威海-开封 河源-朔州 株洲-鹰潭 昌都-丹东 本溪-宣城 连云港-阳江 义乌-邹城 和田-厦门 亳州-乌海 乌鲁木齐-舟山 邹城-山南 双流-辽源 那曲-温岭 庄河-常德 柳州-临沂 遵化-新乡 宜宾-黄南 贵港-上饶 黄南-菏泽 张家界-桓台 来宾-白银 南昌-那曲 惠安-宜昌 柳州-桂林 玉溪-眉山 德清-梅州 寿光-滨州 汕尾-绵阳 鹤壁-喀什 葵潭-赣州 信阳-江永 新化-杭州 恩施-长寿北 大连-六合镇 伊和恩格拉-贲红 温州-湘乡 新乡-西安 马鞍山-分宜 成吉思汗-丹东 兰棱-海拉尔 鞍山-宣化 郴州-石泉县 双子河-红山 遂宁-横峰 锦州-宁波 岑溪-长沙 敖力布告-正镶白旗 大林-松树 大庆东-羊草 肇庆-宜州 达日其嘎-古鲁满汗 河洛营-中台子 渑池-兰州 温州-泰山 平果-来宾北 五女山-铁佛寺 福州南-阳澄湖 沈阳-经棚 羊者窝-石林南 兖州-新沂 海阳-驻马店 赣州-长治 汪清-天桥岭 兰州-广德 普兰店-绥中 拉哈-大扬气 宣汉-荆门 南平北-宜春 毛坝-大竹园 哈尔滨-新松浦 邢台-辽阳 淄博-洮南 肇东-鄯善 蚌埠-曲靖 许昌-丰镇 嘉善南-金华 青县-德惠 莱西北-文登东 陇西-新和 沂南-长垣 兰州-北京 诸暨-德安 唐河-杭州 肇庆-狮山 衡水-金华 天津西-涉县 天水-泰宁 芜湖-洛阳 东莞东-荆门 鄯善-中卫 任丘-泰和 桐梓-凯里 柏果-永川 四平-定陶 四平东-凤城东 昆山-商城 小扬气-青水山 宝清-双柳 兴隆镇-海城 厦门-南平北 平庄-南芬 汝州-米易 曲靖-内江 赤壁北-郴州西 西安-庐江 福州-溧水 九江-渭南 潍坊-六盘水 平顶山-上海

Copyright © 2016 phpStudy |