HTML 5 CSS 3の素晴らしいケース:VCD包装ケースの個性的なスライドを実現します.

8581 ワード

JavaScript css 3 臀部のピクチャー

転載は出所を明記してください.http://blog.csdn.net/lmj623565791/article/details/31015121
はい、まずw 3 cfunsの先生に感謝します.
はい、今回はヘアピンにCSS 3+Javascriptを共有します. VCDパッケージの個性的なスライドショーの一例.
効果図:
画像の切り替えはとても個性的で、効果もいいです.自分のサイトに使うことができます.
まず見てください

<!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が最も外側の容器なことを見ることができて、それに1つの背景を設けました;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:absolutionに依存します.そして、CSS 3を使った移行と変形が分かります.transionとtransformは簡単に言います.
1、transion:left 1 s ease 0 s;
パラメータ1:遷移効果が必要な属性は、単一属性:width、leftなどでも、allに設定できます.
パラメータ2:移行の持続時間
パラメーター3:移行のスピードアニメーション、これはみんなが調べることができる興味があって、先に遅くなった後に速くて、均等速度の類の.
パラメータ4:遷移開始の遅延時間
transionも以下のような書き方をサポートしています.
trosition-property:border、カラー、text-show;
trantio n-duration:2 s、3 s、3 s.
2、トランスフォームはいくつかの変形をサポートしています.
transform:scale(0.5)スケーリング
tranform:rotate(90 deg)は90度回転します.
tranform:skw(10 deg) 2 deg)斜めに切ると、長方形が平行四辺形に変換されます.
transform:matrix()このマトリックスは変形します. http://www.useragentman.com/matrix/このウェブサイトはオンラインの設計マトリックスを提供します.
transform:translate(40 px 20 px)を並べて移動します.
例外提供しました:tranform-origgin: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.autPlay()呼び出し、

    <script type="text/javascript">

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

    </script>

リセットのcssは貼りません.ソースをダウンロードします.
ダウンロードのソースをクリックしてください

jqGrid基本使用及び関連方法