HTML5 CSS3 Exquisite case: Achieve VCD box personality slide

Reprint Please specify source: http://blog.csdn.net/lmj623565791/article/details/31015121

Ha, first thank the next W3cfuns teacher, line ~

Yes. This time share a case of hairpin css3+javascript VCD box personality slide.

：

Picture switching is not very personality, the effect is very good. You can use it on your site.

First look at the HTML:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
You can see that the DIV#VCD is the outermost container, set a background for it, and UL Li sets the image elements separately. I#CD set the background to disc, and then set the display location. Displays the index of the picture in the Div#indexbar. For click.
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;}

For CSS you can follow a knock, the layout of the position is mainly dependent on position:relative and position:absolute; then you will find transitions and transformations using CSS3: Transition and transform Let me briefly mention:
1, transition:left 1s ease 0s;
Parameter 1: Attributes that require transition effects, can be a single attribute: Width,left, and so on. can also be set to all.
Number 2: Duration of the transition
Parameter 3: Rate animation for transitions. This people are interested to be able to check, is the first slow, fast, uniform and so on.
Number 4: Delay time when the transition starts
Transition also supports, for example, the following notation:
Transition-property:border, color, Text-shadow;
TRANSITION-DURATION:2S, 3s, 3s;
2, transform support several variants
Transform:scale (0.5) Zoom
Transform:rotate (90deg) rotate 90 degrees
Transform:skew (10deg 2deg) chamfered, rectangle converted to parallelogram
Transform:matrix () This matrix variant http://www.useragentman.com/matrix/This site provides an online design matrix
Transform:translate (40px 20px) panning
Exceptions are provided: transform-origin:20% 20%; The starting point for altering the effect of the warp. The key to the tacit feeling
Of course we use rotation for this example. There is no need to change the beginning of the deformation effect.

The last is JS:
/** * Created with JetBrains webstorm. * User:zhy * date:14-6-15 * Time: PM 6:26 * To change this template with File | Settings | File Templates.         */var VCD = {/** * constant * */ID_VCD: "VCD", Id_indexbar: "Indexbar", Id_cd: "CD",        Class_active: "ACTIVE", Class_cd_switch: "SWITCH", currentindex:0, Isrunning:false, Timer:null, Init:function () {/** * Initialize data with event */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); },/** * button click Toggle * @paraM event */dotclick:function (event) {//Assuming the current animation is still executing, return directly if (vcd.isrunning) r            Eturn;            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 ();//Block A's default jump page},/** * When the CD animation is finished, update the picture */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); },/** * own active play */Autoplay:function () {Vcd.timer = SetInterval (functio            N () {Vcd.autoclick ();        }, 3000); }    }    ;

A single example of the wording. An object is defined and then the user passes the Vcd.init (); Vsd.autoplay () Call,
    <script type= "Text/javascript" >        $ (function ()        {            vcd.init ();            Vcd.autoplay ();        });    </script>

Reset the CSS I will not post. Below I will provide the source code for everyone to download.


Click to download source code



 
Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.
 
HTML5 CSS3 Exquisite case: Achieve VCD box personality slide