JS+css3实现图片画廊效果总结

最近学习一个在线小项目，用JS+css3实现图片画廊的效果，具体效果可以点击以下链接查看：

Here

案例中主要用到一些新的CSS3效果比如：
1、3D视图位置设置和子元素3D支持

-webkit-perspective:800px;/*若设置为0px则不支持3D透视功能*/
-webkit-transform-style:preserve-3d;

2、翻转为不可见时隐藏

-webkit-backface-visibility:hidden;

 

3、使用CSS旋转和进行位移

-webkit-transfrom:translate(0px,0px) rotateY(0deg);

 

4、CSS过渡动画

-webkit-transition:-webkit-transform 0.6s ease-in-out (delay);

 

另外用到的一些前端JS技巧：
1、字符串替换的简易模版功能
1.1、

template.replace('{{index}}',s).replace('{{img}}',data[s].img).replace('{{caption}}',data[s].caption).replace('{{desc}}',data[s].desc);

 

1.2、

.className.replace(/\s*photo_center\s*/,' ');

 

2、根据范围获得一个随机数

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;
}

 

3、使用脚本设置元素的ClassName以及具体的style属性样式

.style['-webkit-transform']='rotate(0deg) scale(1.3)';