文档章节

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

 冷小菜
发布于 2014/12/13 14:07
字数 1151
阅读 4
收藏 0

转载请标明出处: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我就不贴了,下面我把源码提供给大家下载。



  点击下载源码




本文转载自:http://blog.csdn.net/lmj623565791/article/details/31015121

粉丝 2
博文 63
码字总数 0
作品 0
海淀
私信 提问
HTML5 CSS3 精美案例 : 实现VCD包装盒个性幻灯片

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31015121 哈,首先感谢下w3cfuns的老师,嗯~ 好了,这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例...

lmj623565791
2014/06/15
0
0
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
625
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
650
1
25 个精彩的 HTML 5 教程

web开发者必须尽快熟悉并使用起HTML5,因为它在web端开发的发展趋势已经明朗,可以用来创建丰富多彩的效果。使用HTML5还是有一些复杂的,所以本文介绍了25个优秀的HTML教程及小手册,欢迎大家...

小卒过河
2011/11/16
4.2K
4
6个最好的 HTML5/CSS3 演示(PPT)框架

HTML 是全世界最流行的网页编程语言。而HTML5是这门语言的升级版本。越来越多的开发者和设计师开始使用HTML5.今天我们要介绍的是最好的几个 HTML5/CSS3 的演示工具和框架,你可以用它们来创建...

虫虫
2012/02/29
54.1K
10

没有更多内容

加载失败,请刷新页面

加载更多

爬虫可以采集哪些数据?爬虫借用什么代理可以提高效率

学习爬虫的门槛非常低,特别是通过Python学习爬虫,即使是网上也能找到许多学习爬虫的方法,而且爬虫在数据采集方面效果比较好,比如可以采集几万、上百万网页数据进行分析,带来极有价值的数...

xiaotaomi
24分钟前
4
0
redis自建笔记

自建redis笔记 最近在linux安装了一下redis,特做一些笔记! 本文先单节点启动redis,然后再进行持久化配置,在次基础上,再分享搭建主从模式的配置以及Sentinel 哨兵模式及集群的搭建 单节点...

北极之北
26分钟前
4
0
没想到Spring Boot居然这么耗内存,有点惊讶

Spring Boot总体来说,搭建还是比较容易的,特别是Spring Cloud全家桶,简称亲民微服务,但在发展趋势中,容器化技术已经成熟,面对巨耗内存的Spring Boot,小公司表示用不起。如今,很多刚诞...

程序员修BUG
29分钟前
4
0
Spring Security 实战干货:Spring Boot 中的 Spring Security 自动配置初探

1. 前言 我们在前几篇对 Spring Security 的用户信息管理机制,密码机制进行了探讨。我们发现 Spring Security Starter相关的 Servlet 自动配置都在spring-boot-autoconfigure-2.1.9.RELEASE...

码农小胖哥
31分钟前
4
0
Docker 容器时区时间不一致 问题解决

解决方案: 1,最傻瓜也最方便的处理方式,运行新的容器前设置本机时区和时间文件与容器的映射 docker run -v /etc/timezone:/etc/timezone -v /etc/localtime:/etc/localtime ...1 -v /etc/...

突突突酱
33分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部