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

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/31015121

哈，首先感谢下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我就不贴了，下面我把源码提供给大家下载。

点击下载源码

HTML5 CSS3 精美案例：实现VCD包装盒个性幻灯片的更多相关文章

HTML5 CSS3 精美案例：达到VCD盒个性幻灯片
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/31015121 哈,首先感谢下w3cfuns教师,行~ 行.这一次分享发夹CSS3 ...
HTML5 CSS3 经典案例：无插件拖拽上传图片（支持预览与批量）（二）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
12款界面精美的 HTML5 & CSS3 网站模板
这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...
精美的HTML5/CSS3表单带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
15款HTML5/CSS3案例展示，导航，日历，钟表。
对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单图标动画 ...
12款非常精致的免费 HTML5 & CSS3 网站模板
01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示下载 02. Folder ...
15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

随机推荐

2010-01-20 12:09 ubuntu下minicom的安装及使用
转http://hi.baidu.com/npugtawqdnbgqrq/item/106f805409b42813db163527 ubuntu下minicom的安装及使用安装: sudo apt ...
DB Query Analyzer 5.03 is distributed, EXCEL table name will be enclosed in square bracket
DB Query Analyzer 5.03 is distributed, table name will be enclosed in square bracket automatically ...
mac os x下Dreamweaver如何还原初始配置
上次在mac下修改Dreamweaver(以下简称dw)时,不知动了哪里,导致打开html文档时设计按钮变灰不能使用!这个太蛋疼了,只能在浏览器中查看效果,live按钮更不用说也是灰化状态. 于是使用 ...
操作json数据
删除: delete json[key] 把json字符串转成jsonObject : eval(+'('+json+')'+) 把jsonObject 转换成json字符串 :json.toJSON ...
小dai浅谈通信网络（一）——引子
说起通信网络,首先来看一个场景: 场景模式: 小明和小刚在闹市碰面. 小明对小刚大声喊道:"小刚,你好啊!" 小刚摇手答到:"你好,小明!" 就这么几句简单的话 ...
JAVA面试题集
基础知识: 1.C++或Java中的异常处理机制的简单原理和应用. 当JAVA程序违反了JAVA的语义规则时,JAVA虚拟机就会将发生的错误表示为一个异常.违反语义规则包括2种情况.一种是JAVA类库 ...
Python版冒泡排序算法
0 为什么写本文一方面对经典排序算法冒泡排序进行复习,另一方面通过实际应用来检验python基础知识的掌握情况,包括range函数.len函数.for循环.if语句.函数定义与调用.列表的排序等知识 ...
解决记录：win10 无法安装VS2017，visual studio installer下载进度始终为0
问题描述:win10 下无法安装VS2017,visual studio installer下载进度始终为0,点击取消按钮后,也没有反应,visual studio installer也关闭不掉: 具 ...
Ubuntu 安装LAMP
简要记录一下. 环境准备虚拟机环境 lz@starnight:~$ sudo -i [sudo] password for lz: root@starnight:~# cat /etc/issue ...
ArcGis SOE(server object extensions)之REST Template初体验
一.安装vs和arcgis server for .net(本例是vs2010.as 10),然后打开vs新建一个项目

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

HTML5 CSS3 精美案例 ： 实现VCD包装盒个性幻灯片的更多相关文章

随机推荐

热门专题

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

HTML5 CSS3 精美案例：实现VCD包装盒个性幻灯片的更多相关文章