JS+CSS3实现超炫的散列画廊特效(5)

<script type="text/javascript"> //随机生成一个值，支持取值范围.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.输出所有的海报 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])); } addPhotos() //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; } //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; } </script>