朋友圈相册 手机版

朋友圈相册
仿朋友圈相册 【注意】【注意】请用google的手机模拟器浏览，因为是手机触摸事件

domo 演示 http://mall.hnsanx.com/mphoto/friends.html 仿微信朋友圈图片 还差一个慢慢变大功能

重要代码：
$(document).ready(function(){
var _window = $(window);
var strSrc = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var total =strSrc.length;
var imgWidth = 110;
var imgHeight =100;
var bigLiList = liList = "";
var _touchList = null;
this.idx = 0;

$.each(strSrc,function(index,item) {
liList += "

";
drawImages(index+1,"#img_",item,imgWidth,imgHeight);
});

$("#photos").append(liList);
//render();
//
$("#photos").delegate("li",'tap',function(){
$("#photos").attr("style","display:none");
$("#large").css("display","block");
var _id = $(this).attr("data-id");
loadImg(_id);
});

function loadImg(_id) {
var numList = "";
var windowWidth = _window.width();
var windowHeight = _window.height();
$("#big_large_box").css("height",windowHeight);
$.each(strSrc,function(index,item){
numList += "

";
bigLiList += "

";

var oImageObj = new Image();
oImageObj.onload = function() {
var W = this.width;
var H = this.height;
var windowWidth = _window.width();
var windowHeight = _window.height();
var drawHeight,drawWidth,drawTop,drawLeft;

if((W/H) > (windowWidth/windowHeight)){
drawHeight = parseInt(windowWidth/(W/H)); //alert(drawWidth);
drawTop = parseInt((windowHeight-drawHeight)/2);
$("#large_img_"+(index+1)).css("margin-top",drawTop+"px");
drawImages(index+1,"#large_img_",item,windowWidth,drawHeight);
}else if(H/W==windowHeight/windowWidth){
drawImages(index+1,"#large_img_",item,windowWidth,windowHeight);
}else {
drawWidth = parseInt((W/H)*windowHeight);
drawLeft = parseInt((windowWidth-drawWidth)/2);
$("#large_img_"+(index+1)).css("margin-left",drawLeft+"px");
drawImages(index+1,"#large_img_",item,drawWidth,windowHeight);
}
}
oImageObj.src = item;
});
$("#big_large_box").append(bigLiList);
_touchList = $("#big_large_box>li");
go(_id-1);
///下面点焦点图
$("#num").append(numList);
$("#num>li").eq((_id-1)).addClass("currun");
var numWidth = $("#num").width();
$("#num").css("left",((windowWidth-numWidth)/2)+"px");
}

function drawImages(i,target,iSrc,iWidth,iHeight) {
var objImage = new Image();
objImage.onload = function() {
$(target+i)[0].width = iWidth;
$(target+i)[0].height = iHeight;
var cav = $(target+i)[0].getContext('2d');
cav.drawImage(this,5,0,iWidth-10,iHeight);
}
objImage.src = iSrc;
}

$("#big_large_box").delegate("li",'tap',function(){
$("#photos").attr("style","display:block");
$("#large").css("display","none");
$("#big_large_box").empty();
$("#num").empty();
bigLiList = "";
});

$("#big_large_box").on('touchstart',function(evt){
this.startX = evt.touches[0].pageX;
this.offsetX = 0;
this.startTime = new Date() * 1;
this.idx = idx;
});

$("#big_large_box").on('touchmove',function(evt){
evt.preventDefault();
this.offsetX = evt.touches[0].pageX - this.startX;
//_touchList;
var i = this.idx-1;
var m = i+3;
for(i;i _touchList[i] && (_touchList[i].style.webkitTransform = 'translate3d(' + ((i-this.idx)*_window.width() + this.offsetX)+'px, 0, 0)');
_touchList[i] && (_touchList[i].style.webkitTransition = 'none');
}
});

$("#big_large_box").on('touchend',function(){
var boundary = _window.width()/3;
var endTime = new Date() * 1;
if(endTime-this.startTime > 800){
if(this.offsetX >= boundary){
//进入前一页
go('-1');
}else if (this.offsetX //进入下一页
go('+1');
}else {
//留在本页
go('0');
}
}else{
if(this.offsetX > 60){
go('-1');
}else if (this.offsetX go('+1');
}else{
go('0');
}
}
});

});

function go(n) {
var cidx;
var _touchList = $("#big_large_box>li");
var len = _touchList.length;

if(typeof n == 'number'){
cidx = n;
}else if(typeof n == 'string'){
cidx = idx + n * 1;
}
//当索引右超出
if(cidx >= len - 1){
cidx = len - 1;
_touchList[cidx].style.webkitTransition = '-webkit-transform 0.6s ease';
_touchList[cidx-1].style.webkitTransition = '-webkit-transform 0.6s ease';
_touchList[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
_touchList[cidx-1].style.webkitTransform = 'translate3d(-'+$(window).width()+'px, 0, 0)';
}else if(cidx cidx = 0;
_touchList[cidx].style.webkitTransition = '-webkit-transform 0.6s ease';
_touchList[cidx+1].style.webkitTransition = '-webkit-transform 0.6s ease';
_touchList[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
_touchList[cidx+1].style.webkitTransform = 'translate3d('+$(window).width()+'px, 0, 0)';
}else {
_touchList[cidx].style.webkitTransition = '-webkit-transform 0.6s ease';
_touchList[cidx-1].style.webkitTransition = '-webkit-transform 0.6s ease';
_touchList[cidx+1].style.webkitTransition = '-webkit-transform 0.6s ease';
_touchList[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
_touchList[cidx-1].style.webkitTransform = 'translate3d(-'+$(window).width()+'px, 0, 0)';
_touchList[cidx+1].style.webkitTransform = 'translate3d('+$(window).width()+'px, 0, 0)';
}
idx = cidx;
var numLi = $("#num>li");
$.each(numLi,function(key,value){
if(key == cidx) numLi.eq(key).addClass("currun");
else numLi.eq(key).removeClass("currun");
});
}
//alert(_window.height());
/*var objImage = new Image();
objImage.index = index+1;
objImage.onload = function() {
var cav = $("#img_"+this.index)[0].getContext('2d');
cav.drawImage(this,0,0,imgWidth,imgHeight);
}
objImage.src = item;*/

/*if(W > windowWidth && H > windowHeight){


}else if(W > windowWidth && H drawHeight = parseInt((H/W)*windowWidth);
drawTop = parseInt((windowHeight-drawHeight)/2);
$("#large_img_"+(index+1)).css("margin-top",drawTop+"px");
drawImages(index+1,"#large_img_",item,windowWidth,drawHeight);
}else if(W windowHeight) {
drawWidth = parseInt((W/H)*windowHeight);
drawLeft = parseInt((windowWidth-drawWidth)/2);
$("#large_img_"+(index+1)).css("margin-left",drawLeft+"px");
drawImages(index+1,"#large_img_",item,drawWidth,windowHeight);
}else {
drawLeft = parseInt((windowWidth-W)/2);
drawTop = parseInt((windowHeight-H)/2);
$("#large_img_"+(index+1)).css("margin-top",drawTop+"px");
$("#large_img_"+(index+1)).css("margin-left",drawLeft+"px");
drawImages(index+1,"#large_img_",item,W,H);
}*/

2015-4-10.zip ( 4.04 MB 下载：28 次 )

AD：真正免费，域名+虚机+企业邮箱=0元