前端程序员给女朋友做的相册——原生JS

摘要：今天要分享的是一款特别的焦点图效果，不依赖，全程手写，代码量不大，百行左右，它的特别之处在于可以多维度的切换谁说程序员没有情调拿这个去给女票定制个专属相册吧源码地址下载核心代码

今天要分享的是一款特别的 html5/css3 焦点图效果，不依赖jquery，全程JS 手写，代码量不大，百行左右，它的特别之处在于 可以多维度的切换

谁说程序员没有情调？ 拿这个去给女票定制个专属相册吧

源码地址：下载

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