今天要分享的是一个特殊的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');newBox(-2,2,'images/2689.jpg');newBox(-1,2,'images/2690.jpg');newBox(0,2,'images/2691.jpg');newBox(1,2,'images/2692.jpg');newBox(2,2,'images/2693.jpg');newBox(3,2,'images/2694.jpg');newBox(4,2,'images/2695.jpg');newBox(5,2,'images/2696.jpg');newBox(2,-2,'images/2697.jpg');newBox(2,-1,'images/2698.jpg');newBox(2,0,'images/2699.jpg');newBox(2,1,'images/2700.jpg');newBox(2,2,'images/2701.jpg');newBox(2,3,'images/2702.jpg')jpg');newBox(2,4,'images/2703.jpg');newBox(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);});});varunit=160;varregisteredBoxes=[];varslidePosX=0;varslidePosY=0;varBox=function(posX,posY,img){this.pos={};this.pos.X=posX;this.pos.Y=posY;这个.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';这个.DOMElement.style.top=(this.pos.Y*unit)-unit+'px';this.DOMElement.setAttribute('data-pos',this.pos.X.toString()+this.pos.Y.toString());varimg=document.createElement('img');img.src=this.img;this.DOMElement.appendChild(img);figure.appendChild(this.DOMElement);registeredBoxes.push(这个);},setPosition:function(axis,val){this.pos[axis]=val;if(axis=='X'){this.DOMElement.style.left=(this.pos[axis]*unit)-unit+'px';}elseif(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());}}functionslide(axis,dir){varlen=registeredBoxes.length;if(axis=='Y'){for(vari=0;i
