//3.通用函数 function g(selector) { var mothod = selector.substr(0, 1) == '.' ? 'getElementsByClassName' : 'getElementById'; return document[mothod](selector.substr(1)); } //随机生成一个值,z支持取值范围 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.random() * diff * min; } //4.输出所有的海报 var data = data; function addPhotos() { var template = g('#warp').innerHTML; var html = []; for(s in data) { var _html = template .replace('{{index}}', s) .replace('{{img}}', data[s].img) .replace('{{caotion}}', data[s].caption) .replace('{{desc}}', data[s].desc); html.push(_html); } g('#warp').innerHTML = html.join(''); rsort(random([0,data.length])); } addPhotos(); //6.计算左右分区的范围 function range(){ var range = { left:{ x:{}, y:{} } , right:{ x:{}, y:{} } }; var wrap = { w:g('#warp').clientWidth, h:g('#warp').clientHeight } var photo = { w:g('.photo')[0].clientWidth, h:g('.photo')[0].clientHeight } range.wrap = wrap; range.photo = photo; range.left.x = [0-photo.w, wrap.w/2-photo.w/2]; range.left.y = [0-photo.h, wrap.h]; range.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; range.right.y = range.left.y; return range; } //5.排序海报 function rsort(n){ var _photo = g('.photo'); var photos = []; for (s=0; s<_photo.length;s++) { _photo[s].className = _photo[s].className.replace(/\s*photo_center\s*/,'') photos.push(_photo[s]); } var photo_center = g('#photo_'+n); photo_center.className+='photo_center '; photo_center = photos.splice(n,1)[0]; //分为左右区域 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'; } 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'; } //console.log(photos.length); } //1.翻面控制 function turn(elem) { var cls = elem.className; if(/photo_front/.test(cls)) { cls = cls.replace(/photo_front/, 'photo_back'); } else { cls = cls.replace(/photo_back'/, 'photo_front'); } return elem.className = cls; }
只能翻转一次咋整
传代码呀~