内容介绍
手机弹窗式触屏相册代码效果，电脑上按住鼠标左键不放可以左右滑动，手机上就不用说了，效果非常不错。我们以前在浏览网站详情页面的时候，经常会看到这样一种效果，当你点击一张图片时，会将其它图片以弹窗的模式显示，接着，你可以通过上下按钮，实现图片的切换。那，手机上如何实现？B5教程网把代码分享出来了。
核心代码如下：
<script>
$('.s_ul li').click(function(){
$('#content').show();
$('.bg').show();
$('.close').show();
$('.s_count').show();
$('#imgs').show();
$(this).parent().find('li').clone().appendTo('#imgs');
var n=$("#imgs li").length;
var dw=100*n;
var fw=dw/64;
var fww=fw+"%";
var dww=dw+"%";
var ll=$("#imgs li").width(fww);
var i=$(this).index()+1;
$('.s_count em').text(n);
var left=-100*(i-1)+"%";
var fq=0;
$('.s_count i').text(i);
$("#imgs li").css("-webkit-transform", "translate3d("+left+",0px,0px)");
$('#imgs').width(dww);
var IMG_WIDTH =100+"%";
$("#imgs li").swipe({
swipeLeft:function(){
var d=$(this).index();
d=d+1;
i=i+1;
fq=100*d;
left=-fq+"%";
if(d==8){
alert('最后一张');
i=8;
}else{
$("#imgs li").css({"-webkit-transform":"translate3d("+left+",0px,0px)","-webkit-transition":"500ms linear"});
}
$('.s_count i').text(i);
},
swipeRight:function() {
var d=$(this).index();
d=d-1;
i=i-1;
fq=-100*d;
left=fq+"%";
if(d==-1){
alert('第一张');
i=1;
}else{
$("#imgs li").css({"-webkit-transform":"translate3d("+left+",0px,0px)","-webkit-transition":"500ms linear"});
}
$('.s_count i').text(i);
}
});
});
$('.close').click(function(){
$('.bg').hide();
$('.close').hide();
$('.s_count').hide();
$('#content').hide();
$('#imgs li').remove();
})
</script>
