Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang ImageView.js, komponen tontonan imej besar yang meniru ruang QQ telefon mudah alih berdasarkan kemahiran zepto.js_javascript
Penjelasan terperinci tentang ImageView.js, komponen tontonan imej besar yang meniru ruang QQ telefon mudah alih berdasarkan kemahiran zepto.js_javascript
- WBOYasal
- 2016-05-16 16:11:131516semak imbas
Kaedah panggilan: ImageView(index,imgData) --parameter indeks ialah nilai indeks yang dipaparkan oleh imej secara lalai, jenis ialah Nombor --parameter imaData ialah tatasusunan url imej, jenis ialah Tatasusunan
Perkenalkan fail zepto.js sebelum menggunakannya
Kod khusus ImageView.js adalah seperti berikut:
Salin kod Kod adalah seperti berikut:
/*
* ImageView v1.0.0
* --Paparan imej besar berdasarkan zepto.js
* --Panggil kaedah ImageView(index,imgDada)
* --index Indeks paparan nilai lalai imej, Nombor --imgData Tatasusunan url imej, Tatasusunan
* */
var ImageView=(fungsi(tetingkap,$){
var _this=$("#slideView"),_ImgData=[],_index=0,_length=0,
_start=[],_org=[],_orgTime=null,
_lastTapDate=null,
_zoom=1,_zoomXY=[0,0],_transX=null,
_advancedSupport = palsu,
_doubleDistOrg=1,_doubleZoomOrg=1,isDoubleZoom = palsu,
isSlide=true,isDrag=false,timer=null,
winW=window.innerWidth,winH=window.innerHeight;
/**
* Acara objek acara
'*/
var Acara={
touchstart:function(e){
e.preventDefault();
Jika (_advancedSupport && e.touches && e.touches.length >= 2) {
var img = getImg();
$(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});
_doubleZoomOrg = _zoom;
_doubleDistOrg = getDist(e.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);
IsDoubleZoom = true;
kembali
}
e = e.sentuhan ? e.sentuhan[0] : e;
adalahDoubleZoom = palsu;
_start = [e.pageX, e.pageY];
_org = [e.pageX, e.pageY];
_orgTime = Date.now();
_transX = -_index * winW;
jika(_zum!=1){
_zoomXY = _zoomXY [0, 0];
_orgZoomXY = [_zoomXY[0], _zoomXY[1]];
var img = getImg();
img&&($(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}));
isDrag = benar
} lain{
_this.find(".pv-inner").css({"-webkit-transitionDuration":"0ms","transitionDuration":"0ms"});
isSlide = benar
}
},
touchmove:function(e){
e.preventDefault();
Jika (_advancedSupport && e.touches && e.touches.length >= 2) {
var newDist = getDist(e.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);
_zoom = (newDist/_doubleDistOrg) * _doubleZoomOrg
var img = getImg();
$(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});
jika (_zoom < 1) {
_zum = 1;
_zoomXY = [0, 0];
$(img).css({"-webkit-transitionDuration": "200ms","transitionDuration": "200ms"})
} lain jika (_zoom >getScale(img) * 2){
_zoom = getScale(img) * 2;
}
$(img).css({"-webkit-transform": "skala(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)"});
kembali
}
jika (isDoubleZoom){
kembali;
}
e = e.sentuhan ? e.sentuhan[0] : e;
jika (_zoom != 1) {
var deltaX = (e.pageX - _start[0]) / _zoom;
var deltaY = (e.pageY - _start[1]) / _zoom;
_start = [e.pageX, e.pageY];
var img = getImg();
var newWidth = img.clientWidth *_zoom,
newHeight = img.clientHeight * _zoom;
var borderX = (newWidth - winW) / 2 / _zoom,
borderY = (newHeight - winH) / 2 / _zoom;
(borderX >= 0)&&(_zoomXY[0] < -borderX || _zoomXY[0] > borderX)&&(deltaX /= 3);
(sempadanY > 0)&&(_zoomXY[1] < -sempadanY || _zoomXY[1] > sempadanY)&&(deltaY /= 3);
_zoomXY[0] = deltaX;
_zoomXY[1] = deltaY;
(_panjang == 1 && newWidth < winW||newWidth < winW)&&(_zoomXY[0] = 0);
(_panjang == 1 && newHeight < winH||newHeight < winH)&&(_zoomXY[1] = 0);
$(img).css({"-webkit-transform": "skala(" _zoom ") translate(" _zoomXY[0]
"px," _zoomXY[1] "px)","transform": "skala(" _zoom ") translate(" _zoomXY[0]
"px," _zoomXY[1] "px)"})
}lain{
jika (!isSlide) kembali;
var deltaX = e.pageX - _start[0];
(_transX > 0 || _transX < -winW * (_panjang - 1))&&(deltaX /= 4);
_transX = -_index * winW deltaX;
_this.find(".pv-inner").css({"-webkit-transform":"translate(" _transX "px,0px) translateZ(0)"});
}
},
touchend:function(e){
jika (isDoubleZoom) {
kembali;
}
jika (_zoom != 1) {
jika (!isDrag){return;}
var img = getImg();
var newWidth = img.clientWidth *_zoom,
newHeight = img.clientHeight * _zoom;
var borderX = (newWidth - winW) / 2 / _zoom,
borderY = (newHeight - winH) / 2 / _zoom;
jika (_panjang > 1 && sempadanX >= 0) {
var updateDelta = 0;
var switchDelta = winW / 6;
jika (_zoomXY[0] < -borderX - switchDelta / _zoom && _index < _panjang - 1){
kemas kiniDelta = 1;
}lain jika (_zoomXY[0] > borderX suisDelta / _zoom && _index > 0){
updateDelta = -1;
}
jika (kemas kiniDelta != 0) {
scaleDown(img);
changeIndex(_index updateDelta);
kembali
}
}
var delta = Date.now() - _orgTime;
jika (delta < 300) {
(delta <= 10)&&(delta = 10);
var deltaDis = Math.pow(180 / delta, 2);
_zoomXY[0] = (_zoomXY[0] - _orgZoomXY[0]) * deltaDis;
_zoomXY[1] = (_zoomXY[1] - _orgZoomXY[1]) * deltaDis;
$(img).css({"-webkit-transition": "400ms cubic-bezier(0.08,0.65,0.79,1)","transition": "400ms cubic-bezier(0.08,0.65,0.79,1)" })
} lain{
$(img).css({"-webkit-transition": "200ms linear","transition": "200ms linear"});
}
jika (borderX >= 0){
jika (_zoomXY[0] < -borderX){
_zoomXY[0] = -borderX;
}lain jika (_zoomXY[0] > borderX){
_zoomXY[0] = sempadanX;
}
}
jika (sempadanY > 0){
jika (_zoomXY[1] < -borderY){
_zoomXY[1] = -borderY;
}lain jika (_zoomXY[1] >borderY){
_zoomXY[1] = sempadanY;
}
}
jika (Math.abs(_zoomXY[0]) < 10) {
$(img).css({"-webkit-transform": "skala(" _zoom ") translate(0px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translate(0px ," _zoomXY[1] "px)"});
kembali
} lain{
$(img).css({"-webkit-transform": "skala(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)"});
}
isDrag = palsu
}lain{
jika (!isSlide){ return;}
var deltaX = _transX - -_index * winW;
var updateDelta = 0;
jika (deltaX > 50){
updateDelta = -1;
}lain jika(deltaX < -50){
kemas kiniDelta = 1;
}
_index=_index updateDelta;
changeIndex(_index);
isSlide =palsu
}
},
klik:fungsi(e){
_zoom=1;
_zoomXY=[0,0];
_this.css("opacity","0");
timer=setTimeout(function(){
_this.css({"display":""}).html("");
buka ikatan();
},150)
},
dobelTap:function(e){
clearTimeout(pemasa);
var sekarang = Tarikh baharu;
jika (sekarang - _lastTapDate < 500){
kembali;
}
_lastTapDate = sekarang;
var img = getImg();
jika (!img){
kembali;
}
jika (_zoom != 1){
scaleDown(img);
}lain{
scaleUp(img);
}
},
setView:function(e){
winW=window.innerWidth;
winH=window.innerHeight;
_this.width(window.innerWidth).height(window.innerHeight);
terjemah((-_index*window.innerWidth),0,0,$(".pv-inner")[0]);
scaleDown(getImg())
}
};
var handleEvent=function(e){
suis (e.type){
kes "mula sentuh":
Event.touchstart(e);
rehat;
kes "touchmove":
Event.touchmove(e);
rehat;
kes "sentuh batal":
kes "sentuhan":
Event.touchend(e);
rehat;
kes "orientationchange":
kes "ubah saiz":
Event.setView(e);
putus
}
};
/**
* Acara mengikat
'*/
var bind=function(){
_this.on("singleTap",fungsi(e){
e.preventDefault();
var sekarang = Tarikh baharu;
jika (sekarang - _lastTapDate < 500){
kembali;
}
_lastTapDate = sekarang;
Event.click(e);
pulangkan palsu;
}).on("doubleTap", fungsi(e) {
e.preventDefault();
Event.dobelTap(e);
pulangkan palsu;
});
_this.on("touchstart touchmove touchend touchcancel", fungsi(e) {
handleEvent(e);
});
Event.setView();
"onorientationchange" dalam tetingkap ? window.addEventListener("orientationchange",Event.setView,false) : window.addEventListener("resize",Event.setView,false);
};
/**
* * Tolak acara
'*/
var unbind= function() {
_this.off();
"onorientationchange" dalam tetingkap ? window.removeEventListener("orientationchange",Event.setView, false) : window.removeEventListener("resize",Event.setView, false)
};
var getDist= function(x1, y1, x2, y2) {
kembalikan Math.sqrt(Math.pow(x2 - x1, 2) Math.pow(y2 - y1, 2), 2)
}
/**
* Zum imej
'*/
var getScale=function(img) {
var h = img.naturalHeight, w = img.naturalWidth,
Skala=w*h/(img.clientHeight*img.clientWidth);
kembali Skala;
};
var scaleUp=function(img) {
skala var = getScale(img);
jika (skala > 1)
$(img).css({"-webkit-transform": "skala(" skala ")","transform": "skala(" skala ")","-webkit-transition": "200ms","transition ": "200ms"});
_zoom = skala;
};
var scaleDown=function(img) {
_zum = 1;
_zoomXY = [0, 0];
_doubleDistOrg = 1;
_doubleZoomOrg = 1;
$(img).css({"-webkit-transform": "skala(1)","transform": "skala(1)","-webkit-transition": "200ms","transition": "200ms "});
};
/**
* Kesan gelongsor
* dist
'*/
var translate = function( distX,distY,speed,ele) {
if( !!ele ){ ele=ele.style; }else{ return; }
ele.webkitTransitionDuration = ele.MozTransitionDuration = ele.msTransitionDuration = ele.OTransitionDuration = ele.transitionDuration = speed + 'ms';
ele.webkitTransform = 'translate(' + distX + 'px,'+distY+'px)' + 'translateZ(0)';
ele.msTransform = ele.MozTransform = ele.OTransform = 'translateX(' + distX + 'px) translateY(' + distY + 'px)';
};
/**
* 更改索引值 _index
*/
var changeIndex=function(index,force){
if (index < 0){
index = 0;
}else if(index >= _length){
index =_length - 1;
}
_index = index;
translate((-_index*window.innerWidth),0,force? "0" : "200" ,$(".pv-inner")[0]);
$("#J_index").html(_index+1+"/"+_length);
imgLoad();
}
/**
* 图片获取
*/
var getImg=function(index) {
var img = _this.find("li").eq(index || _index).find("img");
if (img.size() == 1){
return img[0];
}else{
return null
}
}
/**
* 图片加载
*/
var imgLoad=function(){
if($(".pv-img").eq(_index).find("img")[0]){
$("#J_loading").css("display","");
return;
}else{
$("#J_loading").css("display","block");
var tempImg=new Image(),w,h,set;
tempImg.src=_ImgData[_index];
$(".pv-img").eq(_index)[0].appendChild(tempImg);
tempImg.onload=function(){
$("#J_loading").css("display","");
}
}
};
/**
* 创建大图查看Dome结构
*/
var Create=function(){
_this.append("
"+(_index+1)+"/"+_length+"
").append("")for(var i=0;i<_length;i++){
$(".pv-inner").append("")
}
imgLoad();
};
/**
* 大图查看初始化
*/
var init=function(){
!!_this[0]||$("body").append("");
_this=$("#slideView");
($.os.iphone || $.os.android && parseFloat($.os.version) >= 4)&&(_advancedSupport = benar);
}();
/**
* * Fungsi antara muka pulangan paparan gambar besar
* ImageView(indeks,data)
* indeks nilai indeks awal nubmer
* tatasusunan tatasusunan imej data
'*/
var ImageView=fungsi(indeks,data){
_ImgData=data;
_index=index;
_length=data.length;
//Buat struktur dom
Buat();
//paparan struktur dom
_this.css("paparan","sekat");
//Ikatan acara
bind();
}
Kembalikan ImageView;
})(tetingkap,Zepto);
Kod css yang digunakan oleh ImageView.js adalah seperti berikut:
Salin kod Kod adalah seperti berikut:
/*大图查看*/
.slide-view {background: #000;position: fixed;width: 100%;height: 100%;overflow: hidden;top: 0;left: 0;z-index: 100;opacity:0;display: none; -webkit-animation:fadeIn .2s linear forwards;animation:fadeIn .2s linear forwards;-webkit-touch-callout: tiada;-webkit-transform-style: preserve-3d; }
.slide-view .counts {kedudukan: mutlak;atas: 5%;kiri: 0;kanan: 0;text-align: center;font-size: 0;-webkit-transform-style: preserve-3d; }
.slide-view .counts .value {border-radius: 9px;line-height: 18px;padding: 0 6px;font-size: 11px;display: inline-block;background-color: rgba(102,102,102,.6); warna: #f1f1f1;}
.pv-inner {kedudukan: relatif;z-index: -1;paparan: -webkit-box;paparan: kotak;lebar: 100%;tinggi: 100%;-webkit-transition: semua 350ms linear;-webkit-muka belakang -keterlihatan: tersembunyi;peralihan: semua 350ms linear;kebolehlihatan belakang: tersembunyi;-webkit-touch-callout: tiada;-webkit-transform-style: preserve-3d; }
.pv-inner li {text-align: center;display: -webkit-box;display: box;-webkit-box-align: center;overflow: hidden;width: 100%;height: 100%;-webkit-touch -petak bual: tiada;kebolehlihatan belakang: tersembunyi;-gaya-transformasi-webkit: preserve-3d; }
.pv-inner img {max-width: 97%;max-height: 100%;-webkit-transform: scale(1) translate(0px,0px);transform: scale(1) translate(0px,0px);visibility : boleh dilihat;-webkit-transition: 200ms;transition: 200ms;-webkit-user-select: none;user-select: none;display: block;margin: 0 auto;backface-visibility: hidden;-webkit-transform-style : awet-3d; }
@-webkit-keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:100%;}
}
/*--------------------memuatkan----------------------*/
.ui-loading {position: absolute;left: 50%;top: 50%;display: none;vertical-align: middle;font: 0/0 arial;margin: -5px 0 0 -10px;}
.ui-loading i {display: inline-block;width: 5px;height: 12px;background: #fff;vertical-align: top;-webkit-animation: loading-spin 1s infinite linear;animasi: loading-spin 1s infinite linear;}
.ui-loading i {-webkit-animation: loading-spin 1s infinite linear;animation: loading-spin 1s infinite linear}
.ui-loading i.t2 {margin: 0 3px;-webkit-animation-name: loading-spin-one;animation-name: loading-spin-one}
.ui-loading i.t3 {-webkit-animation-name: loading-spin-two;animation-name: loading-spin-two}
@-webkit-keyframes loading-spin {
0% {opacity: 0}
30% {opacity: 1;-webkit-transform: scale(1,1.2)}
60% {opacity: 0;-webkit-transform: scale(1)}
100% {opacity: 0}
}
@-webkit-keyframes loading-spin-one {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1;-webkit-transform: scale(1,1.2)}
80% {opacity: 0;-webkit-transform: scale(1)}
100% {opacity: 0}
}
@-webkit-keyframes loading-spin-two {
0% {opacity: 0}
40% {opacity: 0}
70% {opacity: 1;-webkit-transform: scale(1,1.2)}
100% {opacity: 0;-webkit-transform: scale(1)}
}
@keyframes loading-spin {
0% {opacity: 0}
30% {opacity: 1;transform: scale(1,1.2)}
60% {opacity: 0;transform: scale(1)}
100% {opacity: 0}
}
@keyframes loading-spin-one {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1;transform: scale(1,1.2)}
80% {opacity: 0;transform: scale(1)}
100% {opacity: 0}
}
@keyframes loading-spin-two {
0% {opacity: 0}
40% {opacity: 0}
70% {opacity: 1;transform: scale(1,1.2)}
100% {opacity: 0;transform: scale(1)}
}
/*--------------------loading-end----------------------*/
ps:代码功能比较简单，可能会存在诸多问题。但也能勉强使用了
下用是使用ImageView.js的一个例子：
复制代码 代码如下:
;(fungsi(){
//Dapatkan elemen imej dalam html
var aImg=document.querySelectorAll("img"),
aImgSrc=[];
//Ikat acara klik pada imej
untuk(var i=0,l=aImg.length;i
aImg[i].className =" conPic";
aImgSrc.push(aImg[i].src);
}
for(var i=0;i<$(".conPic").length;i ){
If($(".conPic")[i].complete){
addTap($(".conPic")[i])
}lain{
$(".conPic")[i].onload=function(){
tambahTap(ini);
}
}
fungsi addTap(obj){
$(obj).on("tap",function(){
//Panggil ImageView
ImageView($(obj)[0].index,aImgSrc);
})
}
})();