/*样式优化，*/ .photo{/*定义下面的是为了消除图片突然的闪动*/ left:50%; 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部分
数据主要写在data.js中，data.js中定义了一个data数组，用来存放22张图片的信息。data数组输出的结构如下：
data中存放的每个对象包括caption、desc、img这三个属性。data中存放的每个对象的内容输出如下。data数据部分主要用来对模板中的字符串进行替换。
data.js的内容如下：
var data = []; var dataStr = '1、照片1<br>\ <br>\ 绿色蔬菜<br>\ <br>\ <br>\ 2、照片2<br>\ <br>\ 照片2<br>\ <br>\ <br>\ 3、照片3<br>\ <br>\ 照片3<br>\ <br>\ <br>\ 4、照片4<br>\ <br>\ 照片4<br>\ <br>\ <br>\ 5、照片5<br>\ <br>\ 照片5<br>\ <br>\ <br>\ 6、一只超可爱的小熊玩具<br>\ <br>\ 一只超可爱的小熊玩具<br>\ <br>\ <br>\ 7、照片7<br>\ <br>\ 照片7<br>\ <br>\ <br>\ 8、照片8<br>\ <br>\ 照片8<br>\ <br>\ <br>\ 9、照片9<br>\ <br>\ 照片9<br>\ <br>\ <br>\ 10、照片10<br>\ <br>\ 照片10<br>\ <br>\ <br>\ 11、照片11<br>\ <br>\ 照片11<br>\ <br>\ <br>\ 12、照片12<br>\ <br>\ 照片12<br>\ <br>\ <br>\ 13、照片13<br>\ <br>\ 照片13<br>\ <br>\ <br>\ 14、照片14<br>\ <br>\ 照片14<br>\ <br>\ <br>\ 15、照片15<br>\ <br>\ 照片15<br>\ <br>\ <br>\ 16、照片16<br>\ <br>\ 照片16<br>\ <br>\ <br>\ 17、照片17<br>\ <br>\ 照片17<br>\ <br>\ <br>\ 18、照片18<br>\ <br>\ 照片18<br>\ <br>\ <br>\ 19、照片19<br>\ <br>\ 照片19<br>\ <br>\ <br>\ 20、照片20<br>\ <br>\ 照片20<br>\ <br>\ <br>\ 21、照片21<br>\ <br>\ 照片21<br>\ <br>\ <br>\ 22、照片22<br>\ <br>\ 照片22<br>\ '; //下面的代码是将dataStr中的内容拆分存放到data数组中 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分解--Controller控制
•输出所有海报内容（视图模板+数据）
•位置分配控制（中央位置、两边位置）
•控制条输出&控制（切换、翻面）
输出所有的海报，遍历data数组，将内容填充到模板中。
//4.输出所有的海报 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); // 每一个海报都有一个对应的按钮 nav.push('<span > </span>'); } //遍历完之后进行回写 html.push('<div>'+nav.join('')+'</div>'); $('#wrap').html(html.join('')); rsort(random([0,data.length])); }
海报排序，分析的图如下：
对左右分区的海报进行排序时，首先对左右分区的海报的位置分析如下：
利用随机数生成当前海报的位置left和top值
//随机生成一个值，支持取值范围.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.计算左右分区的范围{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; }
接着就可以对海报进行排序