朋友圈相册
仿朋友圈相册 【注意】【注意】请用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.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元

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

メモ帳++7.3.1
使いやすく無料のコードエディター

ホットトピック



