為什么我的左劃右劃只能執行一次？左劃執行第二次屏幕會動？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
<title>MyPhoto</title>
<link rel="stylesheet" href="./animate.min.css" type="text/css">
<script src="zepto.min.js"></script>
<style type="text/css">
? ?blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,img{
margin: 0;
padding: 0;
}
? body{background:black;overflow:hidden}
? ul{list-style:none}
? li{float: left;width:100px;height: 100px;overflow: hidden;}
? .large{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;background-color: black;}
</style>
</head>
<body>
<ul id="container">
</ul>
<div class="large animated fadeIn" id="large-container" style="display:none;">
<img id="large_img">
</div>
<script>
var total = 17; //手機圖片數量
var zWin = $(window); //獲取window對象
var render = function(){
var tmpl =''; //變量聲明?
var padding = 2; //設置默認padding值
var winWidth = zWin.width(); //獲取設備的寬度
var picWidth = Math.floor(winWidth-padding*3)/4; //計算每張圖片的寬度
for(var i=1;i<=total;i++){
var p = padding; //賦值2
var imgSrc = 'img/'+i+'.jpg';
if (i%4==1) {
p==0; // 判斷第一張圖片padding為0
};
//添加li標簽
tmpl +='<li data-id="'+i+'" class="animated bounceIn" style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
var imgObj = new Image();
imgObj.index = i;
imgObj.onload = function(){
//相當于document.getElementById('cvs_"+i+"');
var cvs = $('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width; // this 指 imgObj
cvs.height = this.height;
cvs.drawImage(this,0,0);
}
imgObj.src = imgSrc;
}
//打印標簽
$('#container').html(tmpl);
}
render(); //調用render方法
var wImg = $('#large_img');
var loadImg = function(id,callback){
$('#large-container').css({width:zWin.width(),height:zWin.height()}).show();
var imgSrc = 'img/'+id+'.large.jpg';
var imageObj = new Image();
imageObj.onload = function(){
var w = this.width;
var h = this.height;
var winWidth = zWin.width();
var winHeight = zWin.height();
var realw = winHeight*w/h;
var realh = winWidth*h/w;
var paddingLeft = parseInt((winWidth - realw)/2);
var paddingTop = parseInt((winHeight - realh)/2);
wImg.css('width','auto').css('height','auto');
wImg.css('padding-left','0px').css('padding-top','0px');
if(h/w >1.2){ //當高大于寬時
//讓寬布滿屏幕
wImg.attr('src',imgSrc).css('height',winHeight).css('padding-left',paddingLeft);
}else{
wImg.attr('src',imgSrc).css('width',winWidth).css('padding-top',paddingTop);
}
callback&&callback();
}
imageObj.src = imgSrc;
}
$('#container').delegate('li','tap',function(){
//獲取li標簽中的自創屬性data-id 。
var _id = cid = $(this).attr('data-id');
loadImg(_id);
});
$('#large-container').tap(function(){
$(this).hide();
}).swipeLeft(function(){
cid++;
if(cid>total){
cid = total;
}else{
loadImg(cid,function(){
wImg.addClass('animated bounceInRight');
});
}
}).swipeRight(function(){
cid--;
if (cid<1) {
cid = 1;
}else{
loadImg(cid,function(){
wImg.addClass('animated bounceInLeft');
})
}
});
</script>
</body>
</html>
2016-07-21
//查看大圖的交互操作
$('#large_container').tap(function(){
$(this).hide();
}).swipeLeft(function(){
cid++;
if(cid>total){
cid=total;
}
else{
loadImg(cid,function(){
domImage.addEventListener('webkitAnimationEnd',function(){
wImage.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd');
},false);
wImage.addClass('animated bounceInRight');
});
}
}).swipeRight(function(){
cid--;
if(cid<1){
cid=1;
}
else{
loadImg(cid,function(){
domImage.addEventListener('webkitAnimationEnd',function(){
wImage.removeClass('animated bounceInLeft');
domImage.removeEventListener('webkitAnimationEnd');
},false);
wImage.addClass('animated bounceInLeft');
});
}
});