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
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éformationstransform:scale(0.5) scalingtransform:rotate(90deg) rotation 90 degrés/** * 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!