摘要：今天要分享的是一款特別的焦點(diǎn)圖效果，不依賴，全程手寫，代碼量不大，百行左右，它的特別之處在于可以多維度的切換誰說程序員沒有情調(diào)拿這個(gè)去給女票定制個(gè)專屬相冊(cè)吧源碼地址下載核心代碼

今天要分享的是一款特別的 html5/css3 焦點(diǎn)圖效果，不依賴jquery，全程JS 手寫，代碼量不大，百行左右，它的特別之處在于 可以多維度的切換

誰說程序員沒有情調(diào)？ 拿這個(gè)去給女票定制個(gè)專屬相冊(cè)吧

源碼地址：下載

js核心代碼：

window.addEventListener("load",function(){
    figure = document.getElementById("multiSlide");
    topButton       = document.getElementById("top");
    bottomButton    = document.getElementById("bottom");
    leftButton      = document.getElementById("left");
    rightButton     = document.getElementById("right"); 
    
    new Box(-2,2,"images/2689.jpg");
    new Box(-1,2,"images/2690.jpg");
    new Box(0,2,"images/2691.jpg");
    new Box(1,2,"images/2692.jpg");
    new Box(2,2,"images/2693.jpg");
    new Box(3,2,"images/2694.jpg");
    new Box(4,2,"images/2695.jpg");
    new Box(5,2,"images/2696.jpg");
    new Box(2,-2,"images/2697.jpg");
    new Box(2,-1,"images/2698.jpg");
    new Box(2,0,"images/2699.jpg");
    new Box(2,1,"images/2700.jpg");
    new Box(2,2,"images/2701.jpg");
    new Box(2,3,"images/2702.jpg");
    new Box(2,4,"images/2703.jpg");
    new Box(2,5,"images/2704.jpg");
    
    topButton.addEventListener("click", function(){
        if(slidePosY>-3)
            slide("Y",-1);
    });
    bottomButton.addEventListener("click", function(){
        if(slidePosY<4)
            slide("Y",1);
    });
    leftButton.addEventListener("click", function(){
        if(slidePosX>-3)
            slide("X",-1);
    });
    rightButton.addEventListener("click", function(){
        if(slidePosX<4)
            slide("X",1);
    });
});

var unit            = 160;
var registeredBoxes = [];
var slidePosX       = 0;
var slidePosY       = 0;
var Box = function(posX,posY,img){
    this.pos    = {};
    this.pos.X  = posX;
    this.pos.Y  = posY;
    this.img    = img;
    this.init();
}
Box.prototype = {
    init : function(){
        this.DOMElement             = document.createElement("div");
        this.DOMElement.className   = "box";
        this.DOMElement.style.left  = (this.pos.X*unit)-unit+"px";
        this.DOMElement.style.top   = (this.pos.Y*unit)-unit+"px";
        this.DOMElement.setAttribute("data-pos",this.pos.X.toString()+this.pos.Y.toString());
        
        var img = document.createElement("img");
        img.src = this.img;
        
        this.DOMElement.appendChild(img);
        figure.appendChild(this.DOMElement);
        registeredBoxes.push(this);
    },
    setPosition : function(axis,val){
        this.pos[axis] = val;
        if(axis == "X"){
            this.DOMElement.style.left  = (this.pos[axis]*unit)-unit+"px";
        }else if(axis == "Y"){
            this.DOMElement.style.top   = (this.pos[axis]*unit)-unit+"px";
        }
        this.DOMElement.setAttribute("data-pos",this.pos.X.toString()+this.pos.Y.toString());
    }
}

function slide(axis,dir){
    var len = registeredBoxes.length;
    
    if(axis == "Y"){
        for(var i=0; i