利用Css3做焦点图原理解析

        看了鑫哥的文章《web上渐进使用jQuery Mobile中animate相关CSS》，受益匪浅，原文已经是一篇深入浅出讲解相关技术点的优秀文章了，但自己还是想进一步简化些，以便更突出Css3在焦点图动画中的作用原理。鑫哥原文链点：http://www.zhangxinxu.com/wordpress/2012/11/web-jquery-mobile-css3-animate/

        这里的核心是Css3，动画都是Css3完成的，js的作用就是切换元素的class类名

 Css3代码：

@-webkit-keyframes slide-in-right {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slide-out-left {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}
.out, .in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
}
.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slide-out-left;
}
.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slide-in-right;
}
.box{width:500px;height:370px;position:relative;overflow:hidden;}
a{position:absolute;}

html代码：

<div id="box" class="box">
    <a href="/" class="out"><img src="http://dummyimage.com/500x370/ccc/f00" /></a>
    <a href="/" class="out"><img src="http://dummyimage.com/500x370/ccc/0f0" /></a>
    <a href="/" class="out"><img src="http://dummyimage.com/500x370/ccc/00f" /></a>
    <a href="/" class="out"><img src="http://dummyimage.com/500x370/ccc/ff0" /></a>
</div>

js代码：

var a=box.getElementsByTagName('a');
var num=-1;
function nextCard(m){
    for(var i=0;i<4;i++){
        a[i].className='out';
    }
    a[m].className='in';
}
box.onclick=function(){
    num++;
    if(num>=4){
        num=0;
    }
    nextCard(num);
    return false;
}
box.click();

为了突出原理，省去了很多不必要的代码，不过都拷贝下来，在chrome中还是可以看到效果的,点击图片，可以看到4张图片的循环切换。查看演示效果，请点击此链点：http://htmldog.github.io/demo_html/2014/08/11/css3_slide.html

核心是第一段Css3代码，搞懂那些就会觉得这个焦点图巨简单，那些Css3代码即使完全没有接触，到w3school去看下：http://www.w3school.com.cn/css3/css3_animation.asp，很快也能明白。弄清了原理，再添加兼容，渐进增强，向下兼容那些代码也就不难了