コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5 CSS3 の絶妙なケース - VCD パッケージボックスでのパーソナライズされたスライドショーの実現の詳細

黄舟
リリース： 2017-03-09 16:32:59
オリジナル
1633 人が閲覧しました

HTML5 CSS3 の絶妙なケース - VCD パッケージボックスでパーソナライズされたスライドショーを実現する詳細

レンダリング:


画像の切り替えは非常にパーソナライズされており、効果は非常に優れています。自分の Web サイトで使用できます。

まず 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>
ログイン後にコピー


p#vcd が最も外側のコンテナであり、それに背景が設定されていることがわかります。ul li はそれぞれピクチャ要素を設定し、背景をディスクに設定します。そして、表示位置を設定します。クリックすると、画像のインデックスが p#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;
}
ログイン後にコピー


位置のレイアウトは主にposition:relativeとposition:absoluteに依存します。その後、CSS3を使用して遷移と変換を見つけることができます。変換について言及します:


1. トランジション: left 1sease 0s;

パラメータ 1: トランジション効果を必要とする属性。幅、左などの 1 つの属性にすることも、すべてに設定することもできます。

パラメータ 2: トランジションの継続時間

パラメータ 3: トランジションの速度アニメーション 興味がある場合は、最初は遅く、次に速く、均一な速度などを意味します。

パラメータ 4: トランジション開始の遅延時間

transition は次の記述もサポートしています:

transition-property: border, color, text-shadow;

transition-duration: 2s, 3s, 3s;いくつかの変換をサポートします

transform:scale(0.5) スケーリング

transform:rotate(90deg) 90 度回転


transform:skew(10deg 2deg) 斜めにカットされ、長方形は平行四辺形に変換されます


transform:matrix( ) この行列変換 http://www.php.cn/ この Web サイトは、オンライン設計行列を提供します


transform:translate(40px 20px) translation

Exception は、変換を変更するために使用されます。エフェクト 開始点はデフォルトでキーポイントになります

もちろん、この例では回転を使用しているため、デフォーメーションエフェクトの開始点を変更する必要はありません。


最後に、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()、


    <script type="text/javascript">

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

    </script>
ログイン後にコピー

を通じてそれを呼び出します。

以上がHTML5 CSS3 の絶妙なケース - VCD パッケージボックスでのパーソナライズされたスライドショーの実現の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
HTML5， CSS3 ，幻灯片
ソース：php.cn
前の記事：HTML5 CSS3特集 ピュアCSSでフォトアルバム効果を作成するサンプルコードを詳しく解説 次の記事：HTML5/CSS3 の古典的なケース - プラグインを使用せずにドラッグ アンド ドロップで画像をアップロード (1)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
3 つの要素ごとに親要素をラップします 検索オーディオ用のクラスを含む 3 つの div ごとに、スライドショー クラスを含む div をラップしたいだけです。私が受け取ったエラーの 1 つは、elem.parentEl...
から 2024-04-02 13:11:31
0
2
262
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート