//5.排序海报 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*/,''); //因为上面把 photo-front和photo-back都替换掉了， _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); //把剩下的海报分为两个部分 var photos_left = photos.splice(0,Math.ceil(photos.length/2)); var photos_right = photos; var ranges = range(); //左分区排序 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)'; } //右分区排序 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)'; } //控制按钮的处理 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*/,''); } //给对应当前海报的按钮增加 i_current样式 $('#nav_'+n)[0].className += ' i_current'; }
海报正反面切换及控制按钮正烦面切换效果：
function turn(elem) { var cls = elem.className; var n = elem.id.split('_')[1]; if(!(/photo_center/.test(cls))) { rsort(n); } //上面的if语句执行完后className被改变了，由于我没有意思到这一点 //导致总是缺少photo_center这个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; }
可以根据rsort(n)中的n去了解到底哪一个海报是当前展现的海报，也能知道哪一个按钮是当前选中的按钮。
上述即为相应的效果分析。
总结：
分析案例的思路方法:
•模块分析法
•VCD分析法
一些新的CSS效果
•3D视图位置设置 & 子元素3D支持
•翻转不可见时隐藏
•使用CSS旋转（Y轴）和位移
•CSS切换动画
前端脚本技巧
•字符串替换的简易模板功能
•根据范围获得一些随机数
•使用脚本切换元素的className 以及具体的style属性
在实现的过程中，我遇到的一个问题是，将图片进行翻转时，在firefox中反面一直不能被隐藏，就是说下面的代码有问题，检查了很久
.photo-wrap .side{ -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
原来是：我漏写了transform-style:preserve-3d。所以在浏览器兼容时，记得写不加前缀的样式
.photo-wrap{ position:absolute; width:100%; height:100%; -moz-transform-style:perserve-3d; -webkit-transform-style:preserve-3d;/*让里面的元素支持3d的效果*/ <span>transform-style:preserve-3d;/*因为掉了这一句，firefox中的背面一直显示不出来*/</span> -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; }
最后附上完整的js代码：