below to introduce me to follow the on-line video explanation realization picture wall effect picture.
The results of the final implementation include the following:
• When clicking on a picture, the picture is moved to the middle area and enlarged. Toggle the display on the reverse side when the picture is clicked.
• When a picture is clicked, the position of all pictures is randomly rearrangement
• When a control button is clicked, the corresponding picture is displayed in the middle, and the control button toggles the corresponding style. When a continuous click of a control button, the picture is accompanied by the click of the button to switch between the reverse
The whole effect of the VCD decomposition, the following figure:
Decompose the case in a way that the computer can understand.
View Vision: HTML + CSS Basic interface template
controller:javascript content processing, event handling
data data: Data.js not necessary, help to understand
Data is very common, if the content is written dead to the view that HTML, when you want to change the content, you have to modify the HTML, but the use of VCD only need to modify the data section on it. At the same time, the general data part is generated by the background, so the replacement is more convenient. The poster in this case is generated by the template plus data.
View section
The effect area is decomposed into the following three parts:
• Currently displayed poster area
Center horizontally vertically
Allow < control bar button > control Show & Flip
• Left-right storage area
< currently displayed poster area > cut into left and right area
The role is to store other posters
Each poster is randomly positioned at random angles.
• Control Strip Area
Control & Display the corresponding poster
Flip < current display poster > positive and negative
The implemented HTML code is as follows:
<body onselectstart = ' return false; ' ><!--This prevents the text of the page from being selected-->
<!--2. Overwrite view as template string-->
<div class= "wrap" id= "wrap" >
<!-- Div.photo is responsible for translating and rotating-->
<div class= "Photo photo-front" onclick = "Turn (This)" Id= "Photo_{{index}}" >
<!--Div.photo-wrap is responsible for reverse flip-->
<div class= "Photo-wrap" >
<div class= "side Side-front" >
<p class= "image" ></p> <p class= ' caption ' >{{
caption}}</p>
</div>
<div class= "side Side-back" >
<p class= "desc" >{{desc}} </p>
</div>
</div>
</div>
</div>
The {{img}}, {{caption}}}, {{desc}} is the template string, followed by the corresponding but replaced data section.
The view section is styled as follows:
<style type= "Text/css" > *{padding:0;
margin:0;
body{Background-color: #fff;
Color: #555;
font-family: ' Avenir Next ', ' Lantinghei SC ';
font-size:14px;
-moz-font-smoothing:antialiased;
-webkit-font-smoothing:antialiased;/* font Smoothing/}. wrap{//Picture area is centered vertically in the body width:100%;
height:900px;
Position:absolute;
/*-------------------The following two lines to achieve vertical center-------------top:50%;
margin-top:-300px;
/*----------The following four lines are also a way to achieve vertical center-----------------/top:0;
bottom:0;
Margin-top:auto;
Margin-bottom:auto;
/*------------------------------------------------------------* * Background-color: #333;
Overflow:hidden;
-moz-perspective:800px;
-webkit-perspective:800px;//let the child element get 3D element support, here is set the child element distance view position}/* Poster style/* photo{width:260px;
height:320px;
/* Because each poster uses top and left random positioning, the position is set to absolute*/Position:absolute;
Z-index:1; box-shadow:0
0 1px Rgba (0,0,0,.01); /*transform:rotatey (30DEG); */-moz-transition:all. 6s;
* * Let the poster move to produce animation effect/-webkit-transition:all 6s; }. Photo. side{Width:10%;
height:100%;
Background-color: #eee;
Position:absolute;
top:0;
right:0;
padding:20px;
Box-sizing:border-box;
}. Photo. Side-front image{width:100%;
height:250px;
line-height:250px;
Overflow:hidden;
}. Photo. side-front. Image img{width:100%;
}. Photo. Side-front caption{Text-align:center;
font-size:16px;
line-height:50px;
Photo. Side-back desc{color: #666;
font-size:14px;
Line-height:1.5em;
/* The currently selected poster style */. photo_center{/*---the way to vertically center a left:50%;
top:50%;
margin-left:-130px;
margin-top:-160px;
* * To achieve the vertical center of the way two * * * top:0;
bottom:0;
left:0;
right:0;
Margin:auto;
z-index:999;//let the currently selected poster not be covered by other posters/* * is responsible for flip/* photo-wrap{position:absolute;
width:100%;
height:100%;
-moz-transform-style:perserve-3d; -webkit-transform-style:preserve-3d;/* let the elements inside to support the effect of 3d * * transform-style:preserve-3d;/* because of this, Firefox in the back has not been shown *
/-webkit-transition:all 1s;
-moz-transition:all 1s;
Transition:all 1s; }. Photo-wrap. side{-moz-backface-visibility:hidden;//is hidden-webkit-backface-visibility:hidden when the screen is not facing the screen;
Backface-visibility:hidden;
Photo-wrap. side-front{-moz-transform:rotatey (0DEG);
-webkit-transform:rotatey (0DEG);
Transform:rotatey (0DEG);
Photo-wrap. side-back{-moz-transform:rotatey (180DEG);
-webkit-transform:rotatey (180DEG);
Transform:rotatey (180DEG);
Photo-front. photo-wrap{-moz-transform:rotatey (0DEG);
-webkit-transform:rotatey (0DEG);
Transform:rotatey (0DEG);
Photo-back. photo-wrap{-moz-transform:rotatey (180DEG);
-webkit-transform:rotatey (180DEG);
Transform:rotatey (180DEG);
/* The style of the control button/* nav{width:40%;
height:30px;
line-height:30px;
Position:absolute;
left:30%;
bottom:20px;
z-index:999;
/*background-color: #fff; * * Text-align:center;
} * * Normal style/nav i{width:30px;
height:30px;
Display:inline-block;
Cursor:pointer;
Background-color: #aaa;
Text-align:center;
border-radius:50%;
-moz-transform:scale (. 48);
-webkit-transform:scale (. 48);
Transform:scale (. 48); -webkIt-transition:all 1s;
-moz-transition:all 1s;
}. Nav. i:after{}/* currently selected style/. Nav i_current{-moz-transform:scale (1);
-webkit-transform:scale (1);
}. Nav. i_current:after{opacity:1;
}/* Back style */NAV. i_back{-moz-transform:rotatey ( -180DEG);
-webkit-transform:rotatey ( -180DEG);
Background-color: #555;
/* Style optimization, */. photo{/* definition below is to eliminate the flash/left:50% of the picture;
top:50%;
margin:-160px 0 0-130px;
}. photo-wrap{-moz-transform-origin:0% 50%;
-webkit-transform-origin:0% 50%;
Photo-front. photo-wrap{-moz-transform:translate (0px,0px) Rotatey (0deg);
-webkit-transform:translate (0px,0px) Rotatey (0deg);
Photo-back. photo-wrap{-moz-transform:translate (260px,0px) Rotatey (180deg);
-webkit-transform:translate (260px,0px) Rotatey (180deg);
}
Here's an explanation of some of the important parts of the style.
The setting in the case:-webkit-perspective:800px;
You can see set this after setting the effect of Rotatey (45deg), if you do not set the-webkit-transform, then the effect of rotation will not appear, the image of the rotation is only on the plane to rotate. If you set its value too small, the effect will be as follows:
Div.photo is responsible for the translation and rotation of the picture, while the div.photo-wrap is responsible for the 3D flip (positive and negative toggle). To allow the elements inside to support the 3D effect, set the-webkit-transform-style:preserve-3d to Div.photo-wrap.
. Photo-wrap. Side style-webkit-backface-visibility:hidden; this sentence is hidden when the element is not facing the screen.
To animate the move and flip of a picture, give the. Photo-wrap settings-webkit-transition: Here's a look at the transition explanation:
style of the navigation bar
* * Common style
/nav i{
width:30px;
height:30px;
Display:inline-block;
Cursor:pointer;
Background-color: #aaa;
Text-align:center;
border-radius:50%;
-moz-transform:scale (.);
-webkit-transform:scale (.);
Transform:scale (.);
-webkit-transition:all 1s;
-moz-transition:all 1s;
}
/* Current selected style
/nav. i_current{
-moz-transform:scale (1);
-webkit-transform:scale (1);
}
. Nav. i_current:after{
opacity:1;
}
/* Back style
/* nav. i_back{
-moz-transform:rotatey ( -180deg);
-webkit-transform:rotatey ( -180deg);
Background-color: #555;
}
Analysis Chart of navigation bar:
The buttons of the navigation bar are also divided into the front and the back, in order to distinguish between the positive and negative effects, give them a different background color, set the rollover effect, the normal button to reduce-transform:scale (. 48), when the button is selected, set scale (1). The reason for the button to zoom in and out is to know exactly whether the current button is selected and will not break the overall style.
The basic styles are set up to optimize the effect. To make the picture look like a door as if it were just a few shifts to the right, you can add the following style:
/* Style optimization, *
/. photo{/* definition below is to eliminate the sudden flashing
/left:50% picture;
top:50%;
margin:-160px 0 0-130px;
photo-wrap{
-moz-transform-origin:0% 50%;
-webkit-transform-origin:0% 50%
}
. Photo-front. photo-wrap{
-moz-transform:translate (0px,0px) Rotatey (0deg);
-webkit-transform:translate (0px,0px) Rotatey (0deg);
Photo-back. photo-wrap{
-moz-transform:translate (260px,0px) Rotatey (180deg);
-webkit-transform:translate (260px,0px) Rotatey (180deg);
}
Data section
The data is mainly written in Data.js, and the data.js defines a data array for storing 22 pictures of information. The output of the data array is structured as follows:
Each of the objects stored in data includes the three properties of caption, DESC, and IMG. The contents of each object stored in data are output as follows. The data section is primarily used to replace strings in the template.
The contents of Data.js are as follows:
var data = []; var datastr = ' 1, photo 1<br>\ <br>\ green vegetables <br>\ <br>\ <br>\ 2, photos 2<br>\ <br>\ photos 2<
Br>\ <br>\ <br>\ 3, photo 3<br>\ <br>\ photos 3<br>\ <br>\ <br>\ 4, photo 4<br>\
<br>\ photo 4<br>\ <br>\ <br>\ 5, photo 5<br>\ <br>\ photos 5<br>\ <br>\ <br>\ 6, a super cute teddy bear toy <br>\ <br>\ A super cute teddy bear toy <br>\ <br>\ <br>\ 7, photo 7<br>\ <br>\ Photos 7 <br>\ <br>\ <br>\ 8, photo 8<br>\ <br>\ photos 8<br>\ <br>\ <br>\ 9, photo 9<br
>\ <br>\ photo 9<br>\ <br>\ <br>\ 10, photo 10<br>\ <br>\ photos 10<br>\ <br>\ <br>\ 11, photo 11<br>\ <br>\ photos 11<br>\ <br>\ <br>\ 12, photos 12<br>\ <br>\ photos 12 <br>\ <br>\ <br>\ 13, photo 13<br>\ <br>\ photos 13<br>\ <br>\ <br>\ 14, photo 14< br>\ <br>\ Photo 14<br>\ <br>\
<br>\ 15, photo 15<br>\ <br>\ photos 15<br>\ <br>\ <br>\ 16, photos 16<br>\ <br>\ photos 16 <br>\ <br>\ <br>\ 17, photo 17<br>\ <br>\ photos 17<br>\ <br>\ <br>\ 18, photo 18<
br>\ <br>\ photo 18<br>\ <br>\ <br>\ 19, photo 19<br>\ <br>\ photos 19<br>\ <br>\ <br>\ 20, photo 20<br>\ <br>\ photos 20<br>\ <br>\ <br>\ 21, photos 21<br>\ <br>\ photos 21
<br>\ <br>\ <br>\ 22, photo 22<br>\ <br>\ photo 22<br>\ ';
The following code splits the contents of the DATASTR into the data array var d = datastr.split (' <br><br><br> ');
for (var i = 0;i < D.length; i++) {var c = d[i].split (' <br><br> ');
Data.push ({img: ' img ' + (i+1) + '. jpg ', caption:c[0].split (', ') [1], desc:c[1]});
}
VCD Decomposition--controller control
• Output all poster content (view template + data)
• Position Assignment Control (central position, both sides position)
• Control strip output & control (toggle, flip side)
Prints all the posters, iterates through the data array, and populates the template with the content.
4. Output all the posters
var data = data;
function Addphotos () {
var template = $ (' #wrap '). html ();
var html = [];
var nav = [];
For (s in data) {
var _html = Template.replace (' {{index}} ', s)
. Replace (' {{{img}} ', data[s].img).
Replace (' {{caption}} ', Data[s].caption)
. Replace (' {{desc}} ', Data[s].desc);
Html.push (_html);
Each poster has a corresponding button
nav.push (' <span id= ' nav_ ' +s+ ' onclick= ' Turn (This) ' class= ' I ' > </span> ');
//Back to write
Html.push (' <div class= ' nav ' > ' +nav.join (') + ' </div> ')
after traversal $ (' #wrap '). HTML (Html.join ('));
Rsort (Random ([0,data.length]));
}
The poster is sorted, and the analysis is shown below:
When you sort a poster for the left and right partitions, the position of the left and right sections of the poster is analyzed as follows:
Use random numbers to generate the position of the current poster left and top values
Randomly generates a value that supports the range of values. Random ([Min,max]);
function random (range) {
var max = Math.max (range[0],range[1]);
var min = math.min (range[0],range[1]);
var diff = max-min;
var number = Math.ceil (Math.random () *diff + min);
return number;
}
6. Calculate the range of the left and right partitions {Left:{x:[min,max],y[min,max]},right{x:[min,max],y:[min,max]}}
function range () {
var ran = {
left:{
x:[],y:[]
},
right:{
x:[],y:[]
}}; var wrap = {
w:$ (' #wrap '). Width (),
//w:600,
h:$ (' #wrap '). Height ()
}
var photo = {
w:$ ( '. Photo ') [0].clientwidth,
h:$ ('. Photo ') [0].clientheight
}
ran.left.x = [0-PHOTO.W,WRAP.W/2- PHOTO.W/2];
Ran.left.y = [0-photo.h,wrap.h];
Ran.right.x = [Wrap.w/2 + PHOTO.W/2,WRAP.W + PHOTO.W];
Ran.right.y = Ran.left.y;
return ran;
}
Then you can sort the posters.
5. Sort poster function Rsort (n) {var _photo = $ ('. Photo ');
var photos = [];
for (var i = 0;i < _photo.length;i++) {_photo[i].classname = _photo[i].classname.replace (/\s*photo_center\s*/, ');
_photo[i].classname = _photo[i].classname.replace (/\s*photo-front\s*/, ");
_photo[i].classname = _photo[i].classname.replace (/\s*photo-back\s*/, ");
Because the top of the Photo-front and Photo-back are replaced, _photo[i].classname + = ' photo-front ';
_photo[i].style.left = ';
_photo[i].style.top = '; _photo[i].style['-moz-transform '] =_photo[i].style[' transform '] = _photo[i].style['-webkit-transform '] = ' rotate (
0DEG) Scale (1.3) ';
Photos.push (_photo[i]);
}//var Photo_center = $ (' #photo_ ' +n) [0];
var photo_center = document.getElementById (' photo_ ' +n);
var newclass = photo_center.classname + ' photo_center ';
Console.log (photo_center.attr (' class '));
Photo_center = Photos.splice (n,1) [0];
Photo_center.classname = Newclass;
$ (' #photo_ ' +n). attr (' class ', newclass); Divide the remaining posters into two parts var photos_lEFT = Photos.splice (0,math.ceil (PHOTOS.LENGTH/2));
var photos_right = photos;
var ranges = range ();
Left partition sort for (s in photos_left) {var photo = Photos_left[s];
Photo.style.left = Random (ranges.left.x) + ' px ';
Photo.style.top = Random (Ranges.left.y) + ' px '; photo.style['-moz-transform '] =photo.style[' transform '] = photo.style['-webkit-transform '] = ' rotate (' +random ' ([-
150,150]) + ' deg ' scale (1) ';
//Right partition sort for (s in photos_right) {var photo = Photos_right[s];
Photo.style.left = Random (ranges.right.x) + ' px ';
Photo.style.top = Random (Ranges.right.y) + ' px '; photo.style['-moz-transform '] =photo.style[' transform '] = photo.style['-webkit-transform '] = ' rotate (' +random ' ([-
100,100]) + ' deg ' scale (1) ';
}//Control button processing var navs = $ ('. I ');
for (var i = 0;i<navs.length;i++) {navs[i].classname = Navs[i].classname.replace (/\s*i_current\s*/, ');
Navs[i].classname = Navs[i].classname.replace (/\s*i_back\s*/, "); //Add I_current Style $ (' #nav_ ' +n) to the button corresponding to the current poster [0].classname + = ' I_curRent ';
}
The positive and negative side of the poster switch and control button is boring surface switch effect:
function Turn (elem) {
var cls = elem.classname;
var n = elem.id.split ('_') [1];
if (!) ( /photo_center/.test (CLS)) {
rsort (n);
}
The above if statement was executed after ClassName was changed since I didn't mean to this point
//cause always missing photo_center This class
var cs = $ (' #photo_ ' +n) [0];
CLS = Cs.classname;
if (/photo-front/.test (CLS)) {
CLS = cls.replace (/photo-front/, ' photo-back ');
$ (' #nav_ ' +n) [0].classname + = ' i_back ';
} else {
CLS = cls.replace (/photo-back/, ' Photo-front ')
$ (' #nav_ ' +n) [0].classname = $ (' #nav_ ' +n) [0]. Classname.replace (/\s*i_back\s*/, ');
}
Cs.classname = CLS;
}
Depending on the n in Rsort (n), you can find out which poster is the currently displayed poster and which button is the currently selected button.
The above is the corresponding effect analysis.
Summarize:
the way to analyze the case:
• Modular Analysis method
VCD Analytical method
some new CSS effects
3d View location settings & child element 3D support
• Flip hidden when not visible
• Use CSS rotation (Y axis) and displacement
CSS Toggle Animation
Front-End Scripting Tips
• Simple template feature for string substitution
• Get some random numbers from the range
• Use script to toggle classname of elements and specific style attributes
In the implementation of the process, I encountered a problem is that when the image is flipped, in Firefox, the reverse side has not been hidden, that is, the following code has a problem, check for a long time
. photo-wrap. side{
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
Backface-visibility:hidden;
}
The original is: I omitted to write transform-style:preserve-3d. So when the browser is compatible, remember to write the style without prefix
. photo-wrap{
Position:absolute;
width:100%;
height:100%;
-moz-transform-style:perserve-3d;
-webkit-transform-style:preserve-3d;/* let the elements inside support the effect of 3d * * *
<span style= "color: #cc0000;" >transform-style:preserve-3d;/* because of this sentence, Firefox in the back has been shown */</span>
-webkit-transition:all 1s;
-moz-transition:all 1s;
Transition:all 1s;
}
Finally attach the complete JS code:
<script type= "Text/javascript" >//randomly generates a value that supports the range of values. Random ([Min,max]);
function random (range) {var max = Math.max (range[0],range[1]);
var min = math.min (range[0],range[1]);
var diff = Max-min;
var number = Math.ceil (Math.random () *diff + min);
return number;
//4. Output all the posters var data = data;
function Addphotos () {var template = $ (' #wrap '). html ();
var html = [];
var nav = []; For (s in data) {var _html = Template.replace (' {{index}} ', s). Replace (' {{{img}} ', data[s].img). Replace (' {{caption}} ', D
ata[s].caption). Replace (' {{desc}} ', Data[s].desc);
Html.push (_html);
Each poster has a corresponding button Nav.push (' <span id= "nav_ ' +s+ '" onclick= "turn (This)" class= "I" > </span> ");
} html.push (' <div class= ' nav ' > ' +nav.join (') + ' </div> ');
$ (' #wrap '). HTML (Html.join ('));
Rsort (Random ([0,data.length])); Addphotos ()//6. Calculates the range of the left and right partitions {Left:{x:[min,max],y[min,max]},right{x:[min,max],y:[min,max]}} function range () {var ran = {left:{x:[],y:[]}, right:{x:[], y:[]}}; var wrap = {w:$ (' #wrap '). Width (),//w:600, h:$ (' #wrap '). Height ()} var photo = {w:$ ('. Photo ') [0].clientwidth, h:$ ('. Photo ')
[0].clientheight} ran.left.x = [0-PHOTO.W,WRAP.W/2-PHOTO.W/2];
Ran.left.y = [0-photo.h,wrap.h];
Ran.right.x = [Wrap.w/2 + PHOTO.W/2,WRAP.W + PHOTO.W];
Ran.right.y = Ran.left.y;
return ran;
//5. Sort poster function Rsort (n) {var _photo = $ ('. Photo ');
var photos = [];
for (var i = 0;i < _photo.length;i++) {_photo[i].classname = _photo[i].classname.replace (/\s*photo_center\s*/, ');
_photo[i].classname = _photo[i].classname.replace (/\s*photo-front\s*/, ");
_photo[i].classname = _photo[i].classname.replace (/\s*photo-back\s*/, ");
Because the top of the Photo-front and Photo-back are replaced, _photo[i].classname + = ' photo-front ';
_photo[i].style.left = ';
_photo[i].style.top = '; _photo[i].style['-moz-transform '] =_photo[i].style[' transform '] = _photo[i].style['-webkit-transform '] = ' rotate (
0DEG) Scale (1.3) '; Photos.push (_photo[i]);
}//var Photo_center = $ (' #photo_ ' +n) [0];
var photo_center = document.getElementById (' photo_ ' +n);
var newclass = photo_center.classname + ' photo_center ';
Console.log (photo_center.attr (' class '));
Photo_center = Photos.splice (n,1) [0];
Photo_center.classname = Newclass;
$ (' #photo_ ' +n). attr (' class ', newclass);
Divide the remaining posters into two parts var photos_left = Photos.splice (0,math.ceil (PHOTOS.LENGTH/2));
var photos_right = photos;
var ranges = range ();
Left partition sort for (s in photos_left) {var photo = Photos_left[s];
Photo.style.left = Random (ranges.left.x) + ' px ';
Photo.style.top = Random (Ranges.left.y) + ' px '; photo.style['-moz-transform '] =photo.style[' transform '] = photo.style['-webkit-transform '] = ' rotate (' +random ' ([-
150,150]) + ' deg ' scale (1) ';
//Right partition sort for (s in photos_right) {var photo = Photos_right[s];
Photo.style.left = Random (ranges.right.x) + ' px ';
Photo.style.top = Random (Ranges.right.y) + ' px '; photo.style['-moz-transform '] =photo.style[' transform ' = Photo.style['-webkit-transform '] = ' rotate (' +random ([ -100,100]) + ' deg ' scale (1) ';
}//Control button processing var navs = $ ('. I ');
for (var i = 0;i<navs.length;i++) {navs[i].classname = Navs[i].classname.replace (/\s*i_current\s*/, ');
Navs[i].classname = Navs[i].classname.replace (/\s*i_back\s*/, ");
//Add I_current Style $ (' #nav_ ' +n) to the button corresponding to the current poster [0].classname + = ' i_current ';
} function Turn (elem) {var cls = Elem.classname;
var n = elem.id.split ('_') [1]; if (!) (
/photo_center/.test (CLS)) {Rsort (n);
///The above if statement has been executed after ClassName has been changed since I have no meaning to this//cause always missing photo_center This class var cs = $ (' #photo_ ' +n) [0];
CLS = Cs.classname;
if (/photo-front/.test (CLS)) {cls = Cls.replace (/photo-front/, ' photo-back ');
$ (' #nav_ ' +n) [0].classname + = ' i_back '; }else {cls = Cls.replace (/photo-back/, ' Photo-front ') $ (' #nav_ ' +n) [0].classname = $ (' #nav_ ' +n) [0].classname.replace (/
\s*i_back\s*/, "");
} cs.classname = CLS;
} </script>
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
