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);

        },

        /**

         * button点击切换

         * @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的老师,嗯~ 好了,这次给发夹分享一个 ...
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 ...

随机推荐

Linux iptables简单配置
#!/bin/sh#modprobe ipt_MASQUERADEmodprobe ip_conntrack_ftpmodprobe ip_nat_ftpiptables -Fiptables -t ...
什么样的企业造什么样的软件最easy成功？
事件1: 一般软件企业按功能分,大体分业务应用型软件和系统工具型软件. 按市场分,应用型软件企业较多,直接贴近生活:系统工具类较少,间接贴近大众较少. 事件2: 软件企业中,当中中小型企业老板存在非常 ...
安卓---项目中插入百度地图sdk
百度地图应用里面自带地图搜房网下载百度地图的sdk 熟悉api 注冊百度开发人员的账号 2.12 仅仅要有一个ak就能够高版本号须要提供应用程序的包名和签名返回开发人员的序列号使用百度地图 ...
for循环中一个不容小觑的问题
for(int i=1;i<=100;i++) 作为程序猿,我们很喜欢使用这种for循环. 可是,当中隐含着一个重要的问题. 过多的编程经历可能使我们的思维产生了一些误解,在上面的for循环中, ...
《JavaScript设计模式与开发实践》读书笔记之观察者模式
1.观察者模式观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. JavaScript中通常采用事件模型替代传统的观察者模式 1.1 逐步实现观 ...
《Javascript高级程序设计》读书笔记之继承
1.原型链继承让构造函数的原型对象等于另一个类型的实例,利用原型让一个引用类型继承另一个引用类型的属性和方法 function SuperType() { this.property=true; } ...
参数化测试--sheet表的应用
自动化测试对录制和编辑好的测试步骤进行回放,这种是线性的自动化测试方式,其缺点是明显的,就是其测试覆盖面比较低.测试回放的只是录制时做出的界面操作,以及输入的测试数据,或者是脚本编辑时指定的界面操作和 ...
PB数据库相关
---------------------------------------------------------------- 数据库画板: 一张表定义了主键或者唯一索引,则能够在Results视窗 ...
bc38 1002, bc39 1002
比赛的时候是对于每个数,记录下来a[i], 并记录该树的下标hash[a[i]] 然后枚举a[i]的倍数,如果a[i]的倍数存在(设为k*a[i]),那么vis[k*a[i]]是不为0的那么可以这样 ...
Cnblogs API
http://wcf.open.cnblogs.com/news/help http://wcf.open.cnblogs.com/blog/help/ 不支持用户登陆

HTML5 CSS3 精美案例 ： 达到VCD盒个性幻灯片

HTML5 CSS3 精美案例 ： 达到VCD盒个性幻灯片的更多相关文章

随机推荐

热门专题

HTML5 CSS3 精美案例：达到VCD盒个性幻灯片

HTML5 CSS3 精美案例：达到VCD盒个性幻灯片的更多相关文章