【html5移动端】点击图片出现排序图集插件-幻灯片制作手指滑动触屏手机幻灯片
第一种方法：效果图为：
HTML代码为:
<?php $this->load->view('common/header_htm'); ?> <style> .postalbum { background-color:rgba(0,0,0,.9); display:none; height:100%; overflow:hidden; padding:0 0 1px 0; position:absolute; top:0; width:100%; z-index:80; } .postalbum_h { position:absolute;left:0px;top:30px;color:#fff;font-size:20px;z-index:999; background: rgba(0,0,0,0.3); width: 60px;padding-left: 15px; border-radius: 0 15px 15px 0;} .postalbum_h a:link, a:visited, a:hover { color:white; } .postalbum_h_back { position:absolute; left:10px; top:0px; height:25px; width:30px; z-index:90; color:white; } .postalbum_c { height:100%; position:relative; z-index:-1; display:-webkit-box; display:-moz-box; display:-o-box; display:box; -webkit-transition:all 350ms linear; -moz-transition:all 350ms linear; -o-transition:all 350ms linear; transition:all 350ms linear; } .postalbum_u { border-radius:3px 3px 3px 3px; text-align:center; } .postalbum_i { margin-bottom:-3px; max-width:100%; vertical-align:middle; visibility: hidden; } </style> <div class="postalbum" id="postalbumid" data-tid="<?php echo $tid?>"> <div class="postalbum_h"> <span class="postalbum_h_picnum"> <span id="curpic"><?php echo $currentnum+1 ?></span> / <?php echo $totalcount?> </span> </div> <ul class="postalbum_c"> <?php if ($photos):?> <?php foreach ($photos as $photo):?> <li class="postalbum_u" id="u_<?php echo $photo['num']?>"> <img class="postalbum_i" load="0" id="img_<?php echo $photo['num']?>" src="<?php echo $photo['img_url']?>"/> </li> <?php endforeach;?> <?php endif;?> </ul> </div> <script src="<?=$this->config->item('home_url')?>/static/js/jquery-1.11.3.min.js"></script> <script> var rentnum=<?php echo $currentnum ?>; </script> <script>seajs.use("js/ci_albums");</script>
JS代码为：
define("js/ci_album",["jquery","swiper"],function(a){
"user strict";var $=a("jquery");var b=a("swiper");
var tidalbum=$('#postalbumid').attr('data-tid');
function mygetnativeevent(event) {
while(event && typeof event.originalEvent !== "undefined") {
event = event.originalEvent;
}
return event;
}
(function(){
var support3d = ("WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix());
var curkey =rentnum;
var count = $('.postalbum_c li').length;
var imglist = new Array();
var width = document.body.clientWidth || window.innerWidth;
var height = document.documentElement.clientHeight;
$('.postalbum').css({'display':'block', 'height':height + 'px'});
$('.postalbum_u').css({'height':height + 'px', 'width':width + 'px'});
$('.postalbum_i').css({'max-height':'100%', 'visibility':'visible'});
if(support3d) {
$('.postalbum_c').css({'line-height':height + 'px', 'width':width * count + 'px'});
slidmoving('-' + curkey * width);
} else {
$('.postalbum_c').css({'display':'block', 'height':height * count + 'px'});
$('.postalbum_c').css({'top': '-' + curkey * height + 'px'});
}
var position = {};
var status = true;
var posalbum_touch_interval = 0;
var postalbum_timeoutid = null;
touchaction = function(postalbum, postalbum_u, fun) {
postalbum.on('touchstart', postalbum_u, function(e) {
e = mygetnativeevent(e);
position.x1 = e.touches[0].pageX;
position.y1 = e.touches[0].pageY;
position.hori = true;
status = true;
}).on('touchmove', postalbum_u, function(e) {
status = false;
e = mygetnativeevent(e);
position.x2 = e.touches[0].pageX;
position.y2 = e.touches[0].pageY;
position.distx = position.x2 - position.x1;
position.disty = position.y2 - position.y2;
if(Math.abs(position.distx) < 2 * Math.abs(position.disty)) {
position.hori = false;
} else {
e.preventDefault();
}
}).on('touchend', postalbum_u, function(e) {
e = mygetnativeevent(e);
if(position.x2 && Math.abs(position.distx) > 30 && position.hori && !status) {
var swipedire = position.distx > 0 ? 'right' : 'left';
fun.call(this, swipedire, e);
} else if(status) {
postalbum_touch_interval = new Date().getTime();
if(!postalbum_timeoutid) {
postalbum_timeoutid = setTimeout(function() {
var interval = new Date().getTime() - postalbum_touch_interval;
if(interval >= 250) {
fun.call(this, 'tap', e);
}
postalbum_touch_interval = 0;
postalbum_timeoutid = null;
}, 250);
}
}
});
};
var curkeyimg = $('#img_' + curkey);
curkeyimg.css({'-webkit-transition':'all 200ms', '-moz-transition':'all 200ms', '-o-transition':'all 200ms', 'transition':'all 200ms'});
imgchange(curkeyimg, 1, 0, 0);
setTimeout(function() {
fiximgmove(curkeyimg);
}, 350);
var imgscale = 1;
var oldscalex = 0;
var oldscaley = 0;
var newscalex = 0;
var newscaley = 0;
var imgmovestatus = false;
var touch_interval = 0;
var timeoutid = null;
var imgtouchpos = {};
$('.postalbum_u').on('touchstart', '.postalbum_i', function(e) {
if(!imgmovestatus) {
return;
}
e = mygetnativeevent(e);
imgtouchpos.x1 = e.touches[0].pageX;
imgtouchpos.y1 = e.touches[0].pageY;
}).on('touchmove', '.postalbum_i', function(e) {
if(!imgmovestatus) {
return;
}
e = mygetnativeevent(e);
imgtouchpos.x2 = e.touches[0].pageX;
imgtouchpos.y2 = e.touches[0].pageY;
imgtouchpos.distx = imgtouchpos.x2 - imgtouchpos.x1;
imgtouchpos.disty = imgtouchpos.y2 - imgtouchpos.y1;
newscalex = imgtouchpos.distx / imgscale + oldscalex;
newscaley = imgtouchpos.disty / imgscale + oldscaley;
imgchange($('#img_' + curkey), imgscale, newscalex, newscaley);
}).on('touchend', '.postalbum_i', function(e) {
touch_interval = new Date().getTime();
if(!timeoutid) {
timeoutid = setTimeout(function() {
var interval = new Date().getTime() - touch_interval;
var obj = $('#img_' + curkey);
if(interval < 250) {
imgscale = imgscale == 1 ? 2 : 1;
imgmovestatus = (imgscale == 1) ? false : true;
if(imgmovestatus) {
obj.attr('src', obj.attr('orig'));
}
imgchange(obj, imgscale, newscalex, newscaley);
setTimeout(function() {
fiximgmove(obj);
}, 250);
} else {
if(imgmovestatus) {
oldscalex = newscalex;
oldscaley = newscaley;
fiximgmove(obj);
}
}
touch_interval = 0;
timeoutid = null;
}, 250);
}
});
function imgchange(img, scale, x, y) {
if(!img[0]) {
return;
}
scale = scale || 1;
x = x || 0;
y = y || 0;
img.css('-webkit-transform', 'scale(' + scale + ')');
img.css('-moz-transform', 'scale(' + scale + ')');
img.css('-o-transform', 'scale(' + scale + ')');
img.css('transform', 'scale(' + scale + ')');
var pimg = img.parent();
var translatetxt = (support3d ? "translate3d": "translate") + "(" + x * scale + "px, " + y * scale + "px" + (support3d ? ", 0px)": ")");
pimg.css('-webkit-transform', translatetxt);
pimg.css('-moz-transform', translatetxt);
pimg.css('-o-transform', translatetxt);
pimg.css('transform', translatetxt);
}
function fiximgmove(imgobj) {
var offset = imgobj.offset();
var movex = imgobj.width() * imgscale - width;
var movey = imgobj.height() * imgscale - height;
if(movey > 0) {
var yoffset = offset.top - $('.postalbum').offset().top;
if(yoffset > 0) {
oldscaley = oldscaley - yoffset / imgscale;
} else {
if(yoffset + imgobj.height() * imgscale - height < 0) {
oldscaley = oldscaley - (yoffset + imgobj.height() * imgscale - height) / imgscale;
}
}
} else {
oldscaley = 0;
}
if(movex > 0) {
if(offset.left > 0) {
oldscalex = oldscalex - offset.left / imgscale;
} else {
if(offset.left + imgobj.width() * imgscale - width < 0) {
oldscalex = oldscalex - (offset.left + imgobj.width() * imgscale - width) / imgscale;
}
}
} else {
oldscalex = 0;
}
if(imgscale < 1) {
imgscale = 1;
}
newscalex = oldscalex;
newscaley = oldscaley;
imgchange(imgobj, imgscale, oldscalex, oldscaley);
}
var headerstatus = true;
touchaction($('.postalbum'), '.postalbum_u', function(swipedire, touchevent) {
if(imgmovestatus) {
return;
}
switch(swipedire) {
case 'left':
if(curkey >= count - 1) {
return false;
} else {
for(var i=0; i<3; i++) {
if(!$('#img_' + (curkey + i)).attr('src')) {
$('#img_' + (curkey + i)).attr('src', $('#img_'+(curkey + i)).attr('zsrc'));
}
}
curkey++;
if(support3d) {
slidmoving('-' + curkey * width);
} else {
$('.postalbum_c').css({'top': '-' + curkey * height + 'px'});
}
$('#curpic').text(curkey + 1);
}
break;
case 'right':
if(curkey <= 0) {
return false;
} else {
for(var i=-3; i<0; i++) {
if(!$('#img_' + (curkey + i)).attr('src')) {
$('#img_' + (curkey + i)).attr('src', $('#img_'+(curkey + i)).attr('zsrc'));
}
}
curkey--;
if(support3d) {
slidmoving('-' + curkey * width);
} else {
$('.postalbum_c').css({'top': '-' + curkey * height + 'px'});
}
$('#curpic').text(curkey + 1);
}
break;
case 'tap':
var obj = $('.postalbum_h');
if(isIOS){
window.location.href='ios://NativeBack';
}else if(isAndroid){
window.Android.NativeBack();
}else{
window.location.href=cid_url+'/api/show/?tid='+tidalbum;
}
break;
}
});
function slidmoving(distx) {
$('.postalbum_c').css('-webkit-transform', 'translate3d('+ distx + 'px, 0, 0)');
$('.postalbum_c').css('-moz-transform', 'translate3d('+ distx + 'px, 0, 0)');
$('.postalbum_c').css('-o-transform', 'translate3d('+ distx + 'px, 0, 0)');
$('.postalbum_c').css('transform', 'translate3d('+ distx + 'px, 0, 0)');
return true;
}
})();
});
本地效果可以在app/plug/photoswipe/cid_photo.html
手机触屏观看：http://www.5usport.com/forum.php?mod=viewthread&tid=67255
线上效果为：
http://cid.5usport.com/api/show?tid=67308 到 http://cid.5usport.com/api/show/photos?tid=67308&id=54076
第二种方式：
文章来自：http://www.17sucai.com/pins/8142.html (待研究)
