1、先准备好animate.css文件和zetpo.js
2、结构层HTML代码:
<ul id="smallImg"></ul>
<div class="mark"><!--遮罩层-->
<img class="largeImg" src="" />
</div>
</body>
3、样式层CSS,不要忘了链接animate
*{padding:0;margin:0;}
ul{list-style:none;}
ul li{float:left;}
.mark{
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background-color: #000000;
display: none;
}
4、(重点来啦)行为层JavaScript代码,不要忘了链接zepto轻量级框架
$(function(){
//渲染页面
var num=14,
marginL=2,
smallImg=$("#smallImg"),
largeImg=$('.largeImg'),
index=0;
renderSmallImg();
function renderSmallImg(){
var str="";
var m=4;//一行显示几张
var winW=$(window).width();
var smallImgW=(winW-m*marginL)/m;
for(var i=1;i<=num;i++){
str+="<li data-id='"+i+"' class='animated zoomInDown' style='margin-left:"+marginL+"px';>"+
"<canvas data-id='"+i+"' id='cvs"+i+"' width='"+smallImgW+"' height='"+smallImgW+"'>此浏览器不支持canvas</canvas>"+
"</li>";
var img=new Image();
img.k=i;
//加载图片
img.onload=function(){
//获取canvas元素
//zepto转换为js(1、[0];2、get(0))
var cvs=$("#cvs"+this.k).get(0);
var ctx=cvs.getContext('2d');
ctx.drawImage(this,0,0,smallImgW,smallImgW)
}
//图片的路径
img.src="img/"+i+".jpg";
}
//把图片放到canvas里面
smallImg.html(str);
}
//窗口尺寸改变,重新渲染图片
$(window).resize(function(){
renderSmallImg()
})
smallImg.on('tap','li',function(){
var id=$(this).data('id');
index=id;
renderBidImg(id);
})
//渲染大图函数
function renderBidImg(id,callBack){
//点击小图,显示遮罩层
$('.mark').show();
//获取大图片路径
var largeImgSrc="img/"+id+".large.jpg";
//实例化图片
var imgL=new Image();
//加载图片
imgL.onload=function(){
largeImg.attr('src',largeImgSrc);
var winW=$(window).width();
var winH=$(window).height();
imgW=this.width;
imgH=this.height;
//图片的宽度大于高度时,水平显示
if(imgW>imgH){
bl=winW/imgW;
largeImg.css({
'width':imgW*bl+'px',
'height':imgH*bl+'px',
'margin-top':(winH-imgH*bl)/2+'px',
'margin-left':'0'
})
}else{
blH=winH/imgH;
blW=winW/imgW;
largeImg.css({
'width':imgW*blW+'px',
'height':imgH*blH+'px',
'margin-left':(winW-imgW*blW)/2+'px',
'margin-top':'0'
})
}
}
//图片路径
imgL.src=largeImgSrc;
if(callBack){
callBack();
}
}
//点击遮罩层,隐藏遮罩层
$('.mark').tap(function(){
$(this).hide();
}).swipeLeft(function(){
//向左滑动显示下一张
index++;
if(index>num){//显示到最后一张图片时,回到第一张
index=1;
}
renderBidImg(index,function(){
largeImg.addClass('animated bounceInRight').on('webkitAnimationEnd',function(){
$(this).removeClass().off('webkitAnimationEnd');
})
});
}).swipeRight(function(){
//向左滑动显示上一张
index--;
if(index<1){//显示到第一张图片时,回到最后一张
index=num;
}
renderBidImg(index,function(){
largeImg.addClass('animated bounceInLeft').on('webkitAnimationEnd',function(){
$(this).removeClass().off('webkitAnimationEnd');
})
});
})
})