Maison > Article > interface Web > Étui exquis HTML5 CSS3 - détails de la réalisation d'un diaporama personnalisé sur une boîte d'emballage VCD

Étui exquis HTML5 CSS3 - détails de la réalisation d'un diaporama personnalisé sur une boîte d'emballage VCD

黄舟original: 2017-03-09 16:32:591642parcourir

Boîtier HTML5 CSS3 exquis - détails de la réalisation d'un diaporama personnalisé sur la boîte d'emballage du VCD

Rendu :

Le changement d'image n'est-il pas très personnalisé ? , l'effet est également très bon, vous pouvez l'utiliser sur votre propre site Web.

Regardez d'abord le code 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>

<p 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>

    <p 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>
    </p>

</p>


</body>
</html>

Vous pouvez voir que p#vcd est le conteneur le plus externe et qu'un arrière-plan est défini pour celui-ci. ul li définit les éléments de l'image ; séparément ; i #cd Définissez l'arrière-plan du CD, puis définissez la position d'affichage ; p#indexBar affiche l'index de l'image pour les clics.

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

Pour le CSS, vous pouvez suivre les mêmes instructions, pour le position Layout s'appuie principalement sur position:relative et position:absolute ; alors vous trouverez la transition et la transformation en utilisant CSS3 : transition et transform Laissez-moi brièvement mentionner :

1. . Transition : gauche 1s facilité 0s

Paramètre 1 : Attributs qui nécessitent un effet de transition, qui peut être un seul attribut : largeur, gauche, etc., ou peut être défini sur tous.

Paramètre 2 : La durée de la transition

Paramètre 3 : La vitesse d'animation de la transition Si vous êtes intéressé, vous pouvez vérifier cela signifie vitesse lente d'abord puis rapide et uniforme. et ainsi de suite.

Paramètre 4 : Délai pour le début de la transition

La transition prend également en charge l'écriture suivante :

transition-property : border, color, text-shadow

durée de transition : 2 s, 3 s, 3 s ;

2. Transform prend en charge plusieurs déformations

transform:scale(0.5) scaling

transform:rotate(90deg) rotation 90 degrés

transform:skew(10deg 2deg) coupé obliquement, le rectangle est converti en parallélogramme

transform:matrix() Cette transformation matricielle http://www. php .cn/ Ce site Web fournit une matrice de conception en ligne

transform:translate(40px 20px) translation

L'exception fournit : transform-origin : 20 % 20 % ; effet Le point de départ est par défaut le point clé

Bien entendu, notre exemple utilise la rotation, il n'est donc pas nécessaire de modifier le point de départ de l'effet de déformation.

Enfin, 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);
        }

    }
    ;

La méthode d'écriture singleton définit ensuite un objet. l'utilisateur appelle via vcd.init(); vsd.autoPlay(),

    <script type="text/javascript">

        $(function ()
        {
            vcd.init();
            vcd.autoPlay();
        });

    </script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Sujet spécial HTML5 CSS3 Explication détaillée d'un exemple de code pour créer un effet d'album photo en utilisant du CSS purArticle suivant：Sujet spécial HTML5 CSS3 Explication détaillée d'un exemple de code pour créer un effet d'album photo en utilisant du CSS pur

Articles Liés

Voir plus