집 > 기사 > 웹 프론트엔드 > HTML5 CSS3 절묘한 케이스 - VCD 포장 상자에 개인화된 슬라이드쇼를 구현하는 세부 정보

HTML5 CSS3 절묘한 케이스 - VCD 포장 상자에 개인화된 슬라이드쇼를 구현하는 세부 정보

黄舟원래의: 2017-03-09 16:32:591610검색

HTML5 CSS3 정교한 케이스 - 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>

<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는 그림 요소를 별도로 설정합니다. i#cd 배경을 CD로 설정한 다음 표시 위치를 설정하고 클릭 시 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;
}

CSS의 경우 위치 레이아웃을 따르시면 됩니다. 주로 position:relative 및 position:absolute에 의존합니다. 그러면 CSS3을 사용하여 전환 및 변형을 찾을 수 있습니다:

1 . 전환: 왼쪽 1s 완화 0s

매개변수 1: 전환 효과가 필요한 속성으로, 너비, 왼쪽 등 단일 속성일 수도 있고 모두로 설정할 수도 있습니다.

매개변수 2: 전환 기간

매개변수 3: 전환 속도 애니메이션에 관심이 있는 경우 먼저 느리고 그 다음에는 빠르고 균일한 속도를 의미합니다. 등.

매개변수 4: 전환 시작 지연 시간

전환은 다음 쓰기도 지원합니다.

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

2. Transform은 다양한 변형을 지원합니다

transform:scale(0.5) scale

transform:rotate(90deg) 회전 90 도

transform:skew(10deg 2deg) 비스듬히 자르고 직사각형은 평행사변형으로 변환됩니다.

transform:matrix() 이 행렬 변환은 http://www. php .cn/ 이 웹사이트는 온라인 디자인 매트릭스를 제공합니다

transform:translate(40px 20px) 번역

예외 제공: 변환 원본: 20% 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.autoPlay(),

    <script type="text/javascript">

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

    </script>

위 내용은 HTML5 CSS3 절묘한 케이스 - VCD 포장 상자에 개인화된 슬라이드쇼를 구현하는 세부 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 CSS3 특집 순수 CSS를 사용하여 사진 앨범 효과를 만들기 위한 샘플 코드에 대한 자세한 설명다음 기사：HTML5 CSS3 특집 순수 CSS를 사용하여 사진 앨범 효과를 만들기 위한 샘플 코드에 대한 자세한 설명