朋友圈相册
仿朋友圈相册 【注意】【注意】请用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衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

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

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
