Html5 Css3实现VCD包装盒个性幻灯片

作者: web 发布时间: 2017-06-27 浏览: 2458 次编辑

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

哈，首先感谢下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 by zhuxiaocheng on 2017/6/27.
 */
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 VCD包装盒个性幻灯片 css3

你我学习网

Html5 Css3实现VCD包装盒个性幻灯片

热文排行榜更多

Html5 Css3实现VCD包装盒个性幻灯片

热文排行榜 更多

热文排行榜更多