功能描述
previewImage.js 實(shí)現(xiàn)的移動(dòng)端圖片的預(yù)覽，縮放功能。
previewImage.js 是仿wx.previewImage的原生js實(shí)現(xiàn)，支持圖片預(yù)覽，滑動(dòng)切換，雙指縮放，圖片緩存。
previewImage.js源文件代碼
(function( global, factory ) {
//For CommonJS and CommonJS-like
if ( typeof module === "object" && typeof module.exports === "object" ) {
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "previewImage requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function(window){
var $ = {};
var style = "#__previewImage-container{-ms-touch-action:none;touch-action:none;-webkit-touch-action:none;line-height:100vh;background-color:#000;width:100vw;height:100vh;position:fixed;overflow:hidden;top:0;left:0;z-index: 2147483647;transition:transform .3s;-ms-transition:transform .3s;-moz-transition:transform .3s;-webkit-transition:transform .3s;-o-transition:transform .3s;transform:translate3d(100%,0,0);-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);-o-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0)}#__previewImage-container .previewImage-text{position:absolute;top:.6em;text-align:center;font-size:18px;line-height:25px;color:#fff;z-index:10;padding: 0.2em 0.4em;background-color: rgba(255,255,255,0.4);border-radius: 50%;letter-spacing: 0;right:.8em}#__previewImage-container .previewImage-text .previewImage-text-index{font-size: 24px;}#__previewImage-container .previewImage-box{width:999999rem;height:100vh}#__previewImage-container .previewImage-box .previewImage-item{width:100vw;height:100vh;margin-right:15px;float:left;text-align:center;background:url() no-repeat center/auto}#__previewImage-container .previewImage-box .previewImage-item.previewImage-nobackground{background:none}#__previewImage-container .previewImage-box .previewImage-item .previewImage-image{vertical-align:middle;width:100%}";
$.isArray = function(value) {
return Object.prototype.toString.call(value) == '[object Array]';
}
/**
* get multiple elements
* @public
*/
$.all = function(selector, contextElement) {
var nodeList,
list = [];
if (contextElement) {
nodeList = contextElement.querySelectorAll(selector);
} else {
nodeList = document.querySelectorAll(selector);
}
if (nodeList && nodeList.length > 0) {
list = Array.prototype.slice.call(nodeList);
}
return list;
}
/**
* delegate an event to a parent element
* @public
* @param array $el parent element
* @param string eventType name of the event
* @param string selector target's selector
* @param function fn
*/
$.delegate = function($el, eventType, selector, fn) {
if (!$el) { return; }
$el.addEventListener(eventType, function(e) {
var targets = $.all(selector, $el);
if (!targets) {
return;
}
for (var i=0; i<targets.length; i++) {
var $node = e.target;
while ($node) {
if ($node == targets[i]) {
fn.call($node, e);
break;
}
$node = $node.parentNode;
if ($node == $el) {
break;
}
}
}
}, false);
};
var _previewImage = function(){
this.winw = window.innerWidth||document.body.clientWidth; //窗口的寬度
this.winh = window.innerHeight||document.body.clientHeight; //窗口的高度
this.originWinw = this.winw; //存儲(chǔ)源窗口的寬度
this.originWinh = this.winh; //存儲(chǔ)源窗口的高度
this.marginRight = 15; //圖片之間的間隔->previewImage-item的margin-right
this.imageChageMoveX = this.marginRight+this.winw; //圖片切換容器的x位移量
this.imageChageNeedX = Math.floor(this.winw*(0.5)); //圖片切換所需x位移量
this.cssprefix = ["","webkit","Moz","ms","o"]; //css前綴
this.version = '1.0.3'; //版本號(hào)
this.imgLoadCache = new Object(); //圖片加載狀態(tài)儲(chǔ)存 key=md5(img.src),value={isload:true,elem:img};
this.scale = 1; //默認(rèn)圖片放大倍數(shù)
this.maxScale = 4; //圖片默認(rèn)最大放大倍數(shù)
this.maxOverScale = 6; //圖片放大倍數(shù)最大可達(dá)到
// this.minScale = 0.5; //圖片最小可放大倍數(shù)
this.openTime = 0.3; //打開圖片瀏覽動(dòng)畫時(shí)間
this.slipTime = 0.5; //圖片切換時(shí)間
this.maxOverWidthPercent = 0.5; //邊界圖片最大可拉取寬度，屏幕寬度的百分比
this.$box = false; //圖片容器加載狀態(tài)
this.isPreview = false; //是否正在預(yù)覽圖片
var $style = document.createElement('style'); //樣式標(biāo)簽
$style.innerText = style; //加載樣式
$style.type = 'text/css';
this.$container = document.createElement('div'); //加載容器
this.$container.id = '__previewImage-container'; //容器加上id
this.$container.style.width = this.winw+'px'; //加上寬度
this.$container.style.height = this.winh+'px'; //加上高度
document.body.appendChild(this.$container); //插入容器到body
document.head.appendChild($style); //插入樣式到head
this.bind(); //綁定事件
}
_previewImage.prototype.start = function(obj){ //可優(yōu)化 todo
var urls = obj.urls; //待預(yù)覽的圖片列表
var current = obj.current; //當(dāng)前預(yù)覽的圖片地址
this.$container.innerHTML = ''; //清空容器
if(!urls||!$.isArray(urls)||urls.length==0){ //參數(shù)檢測
throw new Error("urls must be a Array and the minimum length more than zero");
return
}
if(!current){ //參數(shù)檢測
this.index = 0;
console.warn("current is empty,it will be the first value of urls!");
}else{
var index = urls.indexOf(current);
if(index<0){
index = 0;
console.warn("current isnot on urls,it will be the first value of urls!");
}
this.index = index; //當(dāng)前圖片序號(hào)
}
this.urls = urls; //所有圖片url列表
this.maxLen = urls.length-1; //最大圖片數(shù) 0<=index<=maxLen
this.cIndex = this.maxLen+1; //containerIndex
this.bIndex = this.maxLen+2; //boxIndex
this.imgStatusCache = new Object(); //圖片信息儲(chǔ)存
this.render(); //渲染預(yù)覽模塊
}
_previewImage.prototype.render = function(){
var _this = this;
if(this.$box===false){ //加載圖片容器
var box = document.createElement('div');
box.className += 'previewImage-box';
this.$box = box; //更新圖片容器
}else{
this.$box.innerHTML = ''; //已有圖片容器-清空容器
}
var text = document.createElement('div'); //當(dāng)前張數(shù)/總張數(shù)--文本標(biāo)簽
this.$text = text;
this.$text.className += 'previewImage-text';
this.$text.innerHTML = "<span class='previewImage-text-index'>"+(this.index+1)+"/</span>"+(this.maxLen+1); //當(dāng)前第幾張/圖片總數(shù)
this.container = this.imgStatusCache[this.cIndex] = {elem:this.$container,x:this.winw,y:0,m:0,my:0,scale:1,scalem:1}; //存儲(chǔ)容器狀態(tài)
this.box = this.imgStatusCache[this.bIndex] = {elem:this.$box,x:0,y:0,m:0,my:0,scale:1,scalem:1}; //存儲(chǔ)圖片容器狀態(tài)
this.urls.forEach(function(v,i){ //圖片
var div = document.createElement('div');
var hash = window.md5?md5(v+i):v+i;
var img;
var imgCache = _this.imgLoadCache[hash];
//緩存圖片&&讀取緩存圖片
if(imgCache&&imgCache.isload){ //圖片已加載--使用緩存
img = imgCache.elem;
div.className+=" previewImage-nobackground";
}else{ //圖片未加載--加載圖片，加入緩存
img = new Image();
img.className += 'previewImage-image';
_this.imgLoadCache[hash] = {isload:false,elem:img};
if(i == _this.index){ //將當(dāng)前需要預(yù)覽的圖片加載
img.src = v;
img.onload = function(){
div.className+=" previewImage-nobackground";
_this.imgLoadCache[hash].isload = true;
}
}
}
_this.imgStatusCache[i] = {hash:hash,x:0,m:0,y:0,my:0,scale:_this.scale,scalem:1}; //修改緩存狀態(tài)
// img.setAttribute("data-index",i); //未使用
div.className+=' previewImage-item';
div.appendChild(img);
_this.$box.appendChild(div); //將圖片div加入 圖片容器
})
this.$container.appendChild(this.$box); //加載圖片容器
this.$container.appendChild(this.$text); //加載圖片張數(shù)提示
var offsetX = -this.imageChageMoveX*this.index; //計(jì)算顯示當(dāng)前圖片，容器所需偏移量
this.box.x = offsetX; //將圖片容器所需偏移量，存入狀態(tài)緩存器
this.container.x = 0; //顯示預(yù)覽模塊
this.$container.style.display = "block";
setTimeout(function(){
_this.translateScale(_this.bIndex,0);
_this.translateScale(_this.cIndex,_this.openTime);
_this.isPreview = true;
},50);
}
_previewImage.prototype.bind = function(){
var $container = this.$container;
var _this = this;
var closePreview = function(){
_this.closePreview.call(_this);
}
var touchStartFun = function(){
_this.touchStartFun.call(_this);
}
var touchMoveFun = function(){
_this.touchMoveFun.call(_this);
}
var touchEndFun = function(){
_this.touchEndFun.call(_this);
}
// var orientationChangeFun = function(){
// var angle = screen.orientation.angle;
// var _this = this;
// if(angle==90||angle==180){
// _this.winw = _this.originWinh;
// _this.winh = _this.originWinw;
// }else{
// _this.winw = _this.originWinw;
// _this.winh = _this.originWinh;
// }
// _this.$container.style.width = _this.winw+'px'; //改變寬度
// _this.$container.style.height = _this.winh+'px'; //改變高度
// _this.imageChageMoveX = _this.marginRight+_this.winw;
// var offsetX = -_this.imageChageMoveX*_this.index; //計(jì)算顯示當(dāng)前圖片，容器所需偏移量
// try{
// _this.box.x = offsetX; //將圖片容器所需偏移量，存入狀態(tài)緩存器
// _this.translateScale(_this.bIndex,0);
// }catch(e){}
// }.bind(this);
var reSizeFun = function(){
var _this = this;
_this.winw = window.innerWidth||document.body.clientWidth; //窗口的寬度
_this.winh = window.innerHeight||document.body.clientHeight; //窗口的高度
_this.originWinw = _this.winw; //存儲(chǔ)源窗口的寬度
_this.originWinh = _this.winh; //存儲(chǔ)源窗口的高度
_this.$container.style.width = _this.winw+'px'; //改變寬度
_this.$container.style.height = _this.winh+'px'; //改變高度
_this.imageChageMoveX = _this.marginRight+_this.winw;
var offsetX = -_this.imageChageMoveX*_this.index; //計(jì)算顯示當(dāng)前圖片，容器所需偏移量
try{
_this.box.x = offsetX; //將圖片容器所需偏移量，存入狀態(tài)緩存器
_this.translateScale(_this.bIndex,0);
}catch(e){}
}.bind(this);
// window.addEventListener("orientationchange",orientationChangeFun,false);
window.addEventListener("resize",reSizeFun,false);
$.delegate($container,'click','.previewImage-item',closePreview);
$.delegate($container,'touchstart','.previewImage-item',touchStartFun);
$.delegate($container,'touchmove','.previewImage-item',touchMoveFun);
$.delegate($container,'touchend','.previewImage-item',touchEndFun);
$.delegate($container,'touchcancel','.previewImage-item',touchEndFun);
}
_previewImage.prototype.closePreview = function(){
var _this = this;
this.imgStatusCache[this.cIndex].x = this.winw;
this.translateScale(this.cIndex,this.openTime);
this.imgStatusRewrite();
this.translateScale(this.index,this.slipTime);
setTimeout(function(){
_this.$container.style.display = "none";
},this.slipTime*1000);
_this.isPreview = false;
}
_previewImage.prototype.touchStartFun = function(imgitem){
this.ts = this.getTouches();
this.allowMove = true; //行為標(biāo)記
this.statusX = 0; //標(biāo)記X軸位移狀態(tài)
this.statusY = 0; //標(biāo)記Y軸位移狀態(tài)
}
_previewImage.prototype.touchMoveFun = function(imgitem){
this.tm = this.getTouches();
var tm = this.tm;
var ts = this.ts;
this.moveAction(ts,tm);
}
_previewImage.prototype.touchEndFun = function(imgitem){
var $container = this.$container;
this.te = this.getTouches();
this.endAction(this.ts,this.te);
}
_previewImage.prototype.moveAction = function(ts,tm){
if(!this.allowMove){
return
}
var imgStatus = this.getIndexImage();
var maxWidth = this.winw*0.3/imgStatus.scale;
var x0_offset = tm.x0 - ts.x0;
var y0_offset = tm.y0 - ts.y0;
if(Math.abs(y0_offset)>0){ //阻止Ios系統(tǒng)的瀏覽器環(huán)境上下滑動(dòng)
event.preventDefault();
}
var imgPositionX = imgStatus.x+x0_offset;
var imgPositionY = imgStatus.y+y0_offset;
var allow = this.getAllow(this.index);
var allowX = this.allowX = allow.x;
var allowY = this.allowY = allow.y0;
if(x0_offset<=0){ //邊界
this.allowX = -allowX;
}
if(y0_offset<=0){ //邊界
allowY = this.allowY = allow.y1;
}
if(tm.length==1){ //單手指(圖片位移)
if(imgStatus.scale>1){
//Y方向位移
if(imgPositionY>=allow.y0){ //超過窗口上邊界
this.statusY = 1;
var overY = imgPositionY - allow.y0;
imgStatus.my = allow.y0-imgStatus.y+this.getSlowlyNum(overY,maxWidth);
}else if(imgPositionY<=allow.y1){ //超過窗口下邊界
this.statusY = 1;
var overY = imgPositionY - allow.y1;
imgStatus.my = allow.y1-imgStatus.y+this.getSlowlyNum(overY,maxWidth);
}else{
this.statusY = 2;
imgStatus.my = y0_offset;
}
//X方向位移
if(x0_offset<0&&imgStatus.x<=-allowX){ //左滑->初始狀態(tài)到達(dá)或超過右邊界->圖片平滑移動(dòng)到達(dá)條件-切換下一張
this.statusX = 1;
this.box.m = x0_offset; //更新位移信息
if(this.index==this.maxLen){ //box到達(dá)右邊界
this.box.m = this.getSlowlyNum(x0_offset); //阻尼效果
}
this.translateScale(this.bIndex,0);
this.translateScale(this.index,0);
}else if(x0_offset>0&&imgStatus.x>=allowX){ //右滑->初始狀態(tài)到達(dá)或超過左邊界->圖片平滑移動(dòng)到達(dá)條件-切換上一張
this.statusX = 2;
this.box.m = x0_offset;
if(this.index==0){ //box到達(dá)左邊界
this.box.m = this.getSlowlyNum(x0_offset); //阻尼效果
}
this.translateScale(this.bIndex,0);
this.translateScale(this.index,0);
}else{ //初始狀態(tài)未到邊界->圖片平滑移動(dòng)到邊界->阻尼移動(dòng)
if(x0_offset==0){
return
}
this.statusX = 3;
imgStatus.m = x0_offset;
if(imgPositionX>=allowX){ //右滑到達(dá)左邊界
this.statusX = 4;
var overX = imgPositionX - allowX;
imgStatus.m = allowX-imgStatus.x+this.getSlowlyNum(overX,maxWidth);
}
if(imgPositionX<=-allowX){ //左滑到達(dá)右邊界
this.statusX = 4;
var overX = imgPositionX + allowX;
imgStatus.m = -allowX-imgStatus.x+this.getSlowlyNum(overX,maxWidth);
}
this.translateScale(this.index,0);
}
}else{ //scale == 1;
if(Math.abs(y0_offset)>5&&this.statusX != 5){ //長圖片處理
var $img = this.getJqElem(this.index);
var imgBottom = $img.height-this.winh;
if(y0_offset>0&&imgPositionY>0){
this.statusX = 7;
this.allowY = 0;
imgStatus.my = - imgStatus.y + this.getSlowlyNum(imgPositionY,maxWidth);
}else if(y0_offset<0&&imgPositionY<-imgBottom){
this.statusX = 7;
if($img.height>this.winh){
var overY = imgPositionY + imgBottom;
this.allowY = -imgBottom;
imgStatus.my = -imgBottom - imgStatus.y + this.getSlowlyNum(overY,maxWidth);
}else{
this.allowY = 0;
imgStatus.my = - imgStatus.y + this.getSlowlyNum(imgPositionY,maxWidth);
}
}else{
this.statusX = 6;
imgStatus.my = y0_offset;
}
this.translateScale(this.index,0);
}else{
if(this.statusX == 6){
return
}
this.statusX = 5;
if((this.index==0&&x0_offset>0)||(this.index==this.maxLen&&x0_offset<0)){ //box到達(dá)左右邊界
this.box.m = this.getSlowlyNum(x0_offset);
}else{
this.box.m = x0_offset;
}
this.translateScale(this.bIndex,0);
}
}
}else{ //多手指(圖片放大縮小)
var scalem = this.getScale(ts,tm)
var scale = scalem*imgStatus.scale;
if(scale>=this.maxScale){ //達(dá)到最大放大倍數(shù)
var over = scale - this.maxScale;
scale = this.maxScale+this.getSlowlyNum(over,this.maxOverScale);
scalem = scale/imgStatus.scale;
}
imgStatus.scalem = scalem;
this.translateScale(this.index,0);
}
}
_previewImage.prototype.endAction = function(ts,te){
var imgStatus = this.getIndexImage();
var x0_offset = te.x0 - ts.x0;
var y0_offset = te.y0 - ts.y0;
var time = te.time - ts.time;
var slipTime = 0;
this.allowMove = false; //結(jié)束所有行為
if(ts.length==1){ //單手指(圖片位移)
if(Math.abs(x0_offset)>10){ //防止誤觸關(guān)閉看圖
event.preventDefault();
}
switch(this.statusY){
case 1:
imgStatus.y = this.allowY;
imgStatus.my = 0;
slipTime = this.slipTime;
break
case 2:
imgStatus.y = imgStatus.y+imgStatus.my;
imgStatus.my = 0;
break
}
switch(this.statusX){
case 1: //左滑->初始狀態(tài)到達(dá)或超過右邊界->圖片平滑移動(dòng)到達(dá)條件-切換下一圖
if(this.index!=this.maxLen&&(x0_offset<=-this.imageChageNeedX||(time<200&&x0_offset<-30))){ //下一圖
this.changeIndex(1);
}else{
this.changeIndex(0);
if(slipTime!=0){
this.translateScale(this.index,slipTime);
}
}
break
case 2: //右滑->初始狀態(tài)到達(dá)或超過左邊界->圖片平滑移動(dòng)到達(dá)條件-切換上一圖
if(this.index!=0&&(x0_offset>=this.imageChageNeedX||(time<200&&x0_offset>30))){ //上一圖
this.changeIndex(-1);
}else{
this.changeIndex(0);
if(slipTime!=0){
this.translateScale(this.index,slipTime);
}
}
break
case 3: //scale>1,初始狀態(tài)未到邊界->圖片平滑移動(dòng)未到邊界
imgStatus.x = imgStatus.x+imgStatus.m;
imgStatus.m = 0;
this.translateScale(this.index,slipTime);
break
case 4: //scale>1,初始狀態(tài)未到邊界->圖片平滑移動(dòng)到邊界->阻尼移動(dòng)
imgStatus.x = this.allowX;
imgStatus.m = 0;
slipTime = this.slipTime;
this.translateScale(this.index,slipTime);
break
case 5: //scale=1,box位移，圖片切換
if(x0_offset>=this.imageChageNeedX||(time<200&&x0_offset>30)){ //上一圖
this.changeIndex(-1);
}else if(x0_offset<=-this.imageChageNeedX||(time<200&&x0_offset<-30)){ //下一圖
this.changeIndex(1);
}else{
this.changeIndex(0);
}
break
case 6: //scale=1,長圖片
imgStatus.y = imgStatus.y+imgStatus.my;
imgStatus.my = 0;
break
case 7: //scale=1,長圖片 到邊界
imgStatus.y = this.allowY;
imgStatus.my = 0;
this.translateScale(this.index,this.slipTime);
break
}
}else{ // 放大倍數(shù)問題
event.preventDefault();
var scale = imgStatus.scale*imgStatus.scalem;
var $img = this.getJqElem(this.index);
imgStatus.scale = scale;
var allow = this.getAllow(this.index);
if(imgStatus.x>allow.x){
slipTime = this.slipTime;
imgStatus.x = allow.x;
}else if(imgStatus.x<-allow.x){
slipTime = this.slipTime;
imgStatus.x = -allow.x;
}
if(imgStatus.y>allow.y0){
slipTime = this.slipTime;
imgStatus.y = allow.y0;
}else if(imgStatus.y<allow.y1){
slipTime = this.slipTime;
imgStatus.y = allow.y1;
}
if($img.height*imgStatus.scale<=this.winh){
imgStatus.y = 0;
}
if($img.width*imgStatus.scale<=this.winw){
imgStatus.x = 0;
}
imgStatus.scalem = 1;
if(scale>this.maxScale){ //倍數(shù)大于最大限制倍數(shù)
imgStatus.scale = this.maxScale;
slipTime = this.slipTime;
}else if(scale<1){//倍數(shù)小于1
this.imgStatusRewrite();
slipTime = this.slipTime;
}
if(slipTime!=0){
this.changeIndex(0);
this.translateScale(this.index,slipTime);
}
}
};
_previewImage.prototype.getAllow = function(index){
var $img = this.getJqElem(index);
var imgStatus = this.getIndexImage(index);
var allowX = Math.floor(($img.width*imgStatus.scale-this.winw)/(2*imgStatus.scale));
var allowY0,allowY1;
if($img.height*imgStatus.scale<=this.winh){
allowY0 = 0;
allowY1 = 0;
}else if($img.height<=this.winh){
allowY0 = Math.floor(($img.height*imgStatus.scale-this.winh)/(2*imgStatus.scale));
allowY1 = -allowY0;
}else{
allowY0 = Math.floor($img.height*(imgStatus.scale-1)/(2*imgStatus.scale));
allowY1 = -Math.floor(($img.height*(imgStatus.scale+1)-2*this.winh)/(2*imgStatus.scale));
}
return {
x:allowX,
y0:allowY0,
y1:allowY1,
};
};
_previewImage.prototype.getSlowlyNum = function(x,maxOver){
var maxOver = maxOver||this.winw*this.maxOverWidthPercent;
if(x<0){
x = -x;
return -(1-(x/(maxOver+x)))*x;
}else{
return (1-(x/(maxOver+x)))*x;
}
};
_previewImage.prototype.getScale = function(ts,tm){
var fingerRangeS = Math.sqrt(Math.pow((ts.x1 - ts.x0),2)+Math.pow((ts.y1-ts.y0),2)); //兩手指的初始距離
var fingerRangeM = Math.sqrt(Math.pow((tm.x1 - tm.x0),2)+Math.pow((tm.y1-tm.y0),2)); //兩手指移動(dòng)過程中的距離
var range = fingerRangeM/fingerRangeS;
return range;
};
_previewImage.prototype.imgStatusRewrite = function(index){
var index = index===undefined?this.index:index;
var imgStatus = this.imgStatusCache[index];
imgStatus.x = 0;
imgStatus.y = 0;
imgStatus.m = 0;
imgStatus.my = 0;
imgStatus.scale = 1;
imgStatus.scalem = 1;
if(index!=this.index){
this.translateScale(index,this.slipTime);
}
}
_previewImage.prototype.changeIndex = function(x){
var imgStatus = this.getIndexImage();
var oldIndex = this.index;
var _this = this;
if(this.index==0&&x==-1){
this.index = this.index;
}else if(this.index==this.maxLen&&x==1){
this.index = this.index;
}else{
this.index+=x;
this.$text.innerHTML = "<span class='previewImage-text-index'>"+(this.index+1)+"/</span>"+(this.maxLen+1); //當(dāng)前第幾張/圖片總數(shù)
var hash = this.imgStatusCache[this.index].hash;
var imgCache = this.imgLoadCache[hash];
if(!imgCache.isload){ //圖片未緩存則加載圖片
imgCache.elem.src = this.urls[this.index];
imgCache.elem.onload = function(){
imgCache.elem.parentNode.className+=" previewImage-nobackground";
imgCache.isload = true;
}
}else{
imgCache.elem.parentNode.className+=" previewImage-nobackground";
}
}
this.box.x = -this.imageChageMoveX*this.index;
this.box.m = 0;
if(oldIndex!=this.index){
this.imgStatusRewrite(oldIndex);
}
this.translateScale(this.bIndex,this.slipTime);
}
_previewImage.prototype.getIndexImage = function(index){
var index = index==undefined?this.index:index;
return this.imgStatusCache[this.index];
}
_previewImage.prototype.translateScale = function (index,duration){
var imgStatus = this.imgStatusCache[index];
$elem = this.getJqElem(index);
var scale = imgStatus.scale*imgStatus.scalem;
var offsetX = imgStatus.x+imgStatus.m;
var offsetY = imgStatus.y+imgStatus.my;
var tran_3d='scale3d('+scale+','+scale+',1) '+' translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)';
// var tran_2d='scale('+scale+','+scale+') '+' translate(' + offsetX + 'px,' + offsetY +'px)';
var transition = 'transform '+duration+'s ease-out';
this.addCssPrefix($elem,'transition',transition);
this.addCssPrefix($elem,'transform',tran_3d);
}
_previewImage.prototype.getJqElem = function(index){
var $elem;
var index = index==undefined?this.index:index;
if(index<=this.maxLen){
var hash = this.imgStatusCache[index].hash;
var img = this.imgLoadCache[hash].elem;
$elem = img;
}else{
var elem = this.imgStatusCache[index].elem;
$elem = elem;
}
return $elem
}
/**
* [addCssPrefix 增加css前綴]
* @param {[elem]} elem [element]
* @param {[string]} prop [css attribute]
* @param {[string]} value [css value]
*/
_previewImage.prototype.addCssPrefix = function(elem,prop,value){ //可以優(yōu)化todo
for(var i in this.cssprefix){
var cssprefix = this.cssprefix[i];
if(cssprefix===""){
prop = prop.toLowerCase();
}else{
var len = prop.length;
prop = prop.substr(0,1).toUpperCase()+prop.substr(1,len).toLowerCase()
}
if(document.body.style[prop]!==undefined){
elem.style[prop] = value;
return
}
}
}
_previewImage.prototype.getTouches = function(e){
var touches = event.touches.length>0?event.touches:event.changedTouches;
var obj = {touches:touches,length:touches.length};
obj.x0 = touches[0].pageX
obj.y0 = touches[0].pageY;
obj.time = new Date().getTime();
if(touches.length>=2){
obj.x1 = touches[0].pageX
obj.y1 = touches[1].pageY
}
return obj;
}
window.previewImage = new _previewImage();
// AMD loader
if ( typeof define === "function" && define.amd ) {
define([], function() {
return previewImage;
} );
}
return previewImage;
}));
使用方法
var obj = {
urls : ['img/1.jpg','img/2.png','img/3.png'],
current : 'img/1.png'
};
previewImage.start(obj);
配置項(xiàng)
urls
類型：Array
默認(rèn)值：null
作用：預(yù)覽的圖集路徑（所有圖片路徑）
是否必傳：是
current
類型：String
默認(rèn)值：none
作用：當(dāng)前預(yù)覽的圖路徑（當(dāng)前圖片）
是否必傳：是
文章來源地址http://www.zghlxwxcb.cn/news/detail-648948.html
文章來源：http://www.zghlxwxcb.cn/news/detail-648948.html
到了這里，關(guān)于previewImage.js實(shí)現(xiàn)圖片放大預(yù)覽，滑動(dòng)切換，雙指縮放，圖片緩存的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
