Exquisites HTML5-CSS3-Gehäuse – Details zur Realisierung einer personalisierten Diashow auf einer VCD-Verpackungsbox-H5-Tutorial-php.cn

HTML5 CSS3 exquisites Gehäuse – Details zur Realisierung einer personalisierten Diashow auf einer VCD-Verpackungsbox

Rendering:

Ist der Bildwechsel nicht sehr personalisiert? ? , der Effekt ist auch sehr gut, Sie können ihn auf Ihrer eigenen Website verwenden.

Schauen Sie sich zuerst den HTML-Code an:

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

Nach dem Login kopieren

Sie können sehen, dass p#vcd der äußerste Container ist und ein Hintergrund dafür festgelegt ist; ul li legt die Bildelemente fest separat; i #cd Legen Sie den Hintergrund für die CD fest und legen Sie dann die Anzeigeposition fest. p#indexBar zeigt den Index des Bildes für Klicks an.

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

Nach dem Login kopieren

Für das CSS können Sie denselben Anweisungen folgen und Für das Positionslayout wird hauptsächlich auf position:relative und position:absolute zurückgegriffen. Dann finden Sie den Übergang und die Transformation mithilfe von CSS3: Transition und Transformation 1. Übergang: links 1s locker 0s ;

Parameter 1: Attribute, die einen Übergangseffekt erfordern, der ein einzelnes Attribut sein kann: Breite, links usw. oder auf alle festgelegt werden kann.

Parameter 2: Die Dauer des Übergangs

Parameter 3: Die Geschwindigkeitsanimation des Übergangs. Wenn Sie interessiert sind, können Sie dies überprüfen. Es bedeutet zuerst langsam und dann schnell, gleichmäßige Geschwindigkeit und so weiter.

Parameter 4: Verzögerungszeit für den Übergangsstart

Transition unterstützt auch die folgende Schreibweise:

transition-property: border, color, text-shadow; >transition-duration:2s, 3s, 3s;

2. Transform unterstützt mehrere Verformungen

transform:scale(0.5) scaling

transform:rotate(90deg) Drehung 90 Grad

transform:skew(10deg 2deg) schräg geschnitten, das Rechteck wird in ein Parallelogramm umgewandelt

transform:matrix() Diese Matrixtransformation http://www. php .cn/ Diese Website bietet eine Online-Designmatrix

transform:translate(40px 20px) translation

Ausnahme: transform-origin: 20% 20% wird zum Ändern der Transformation verwendet Der Startpunkt ist standardmäßig der Schlüsselpunkt

. In unserem Beispiel wird natürlich eine Drehung verwendet, sodass der Startpunkt des Verformungseffekts nicht geändert werden muss.

Schließlich:

Die Singleton-Schreibmethode definiert ein Objekt Benutzeraufrufe über vcd.init(); vsd.autoPlay(),

/**
 * 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);
        }

    }
    ;

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonExquisites HTML5-CSS3-Gehäuse – Details zur Realisierung einer personalisierten Diashow auf einer VCD-Verpackungsbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!