วิธีการโทร: ImageView (ดัชนี, IMGDATA) -พารามิเตอร์ INDEX คือค่าดัชนีที่แสดงโดยภาพเริ่มต้นประเภทคือหมายเลข -พารามิเตอร์ IMADATA คืออาร์เรย์ URL รูปภาพประเภทคืออาร์เรย์
ก่อนใช้งานคุณต้องนำเข้าไฟล์ zepto.js ก่อน
รหัสเฉพาะของ imageView.js มีดังนี้:
การคัดลอกรหัสมีดังนี้:
-
* ImageView v1.0.0
* -ภาพบิกก์ตาม Zepto.js
* -วิธีการเรียก ImageView (ดัชนี, IMGDADA)
* -ดัชนีการแสดงค่าเริ่มต้นค่าเริ่มต้นของรูปภาพ, หมายเลข -imgdata url url url, array
-
var imageView = (ฟังก์ชั่น (หน้าต่าง, $) {
var _this = $ ("#slideView"), _ imgdata = [], _ index = 0, _length = 0,
_start = [], _ org = [], _ orgtime = null,
_lasttapdate = null,
_zoom = 1, _zoomxy = [0,0], _ transx = null,
_AdvancedSupport = FALSE
_doubledistorg = 1, _doublezoomorg = 1, isDoubleZoom = false,
isslide = true, isDrag = false, timer = null,
winw = window.innerWidth, winh = window.innerHeight;
-
* เหตุการณ์เหตุการณ์เหตุการณ์
-
var event = {
TouchStart: ฟังก์ชั่น (e) {
E.preventDefault ();
ถ้า (_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;
กลับ
-
e = e.touches? e.touches [0]: e;
isDoubleZoom = false;
_Start = [E.Pagex, E.Pagey];
_org = [E.Pagex, E.Pagey];
_orgtime = date.now ();
_transx = -_index * winw;
ถ้า (_zoom! = 1) {
_zoomxy = _zoomxy || [0, 0];
_orgzoomxy = [_zoomxy [0], _zoomxy [1]];
var img = getimg ();
img && ($ (img) .css ({"-webkit-transitionDuration": "0ms", "transitionDuration": "0ms"}));
isDrag = true
}อื่น{
_this.find (". pv-inner"). css ({"-webkit-transitionDuration": "0ms", "transitionDuration": "0MS"});
isslide = true
-
-
TouchMove: ฟังก์ชั่น (e) {
E.preventDefault ();
ถ้า (_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"});
ถ้า (_zoom <1) {
_zoom = 1;
_zoomxy = [0, 0];
$ (IMG) .CSS ({"-WebKit-TransitionDuration": "200ms", "TransitionDuration": "200ms"})
} อื่นถ้า (_zoom> getScale (img) * 2) {
_zoom = getScale (img) * 2;
-
$ (img) .css ({"-webkit-transform": "scale (" + _zoom + ") แปล (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoom + " + "px)"});
กลับ
-
if (iSdoublezoom) {
กลับ;
-
e = e.touches? e.touches [0]: e;
ถ้า (_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);
(bordery> 0) && (_ zoomxy [1] <-bordery || _zoomxy [1]> bordery) && (deltay /= 3);
_zoomxy [0] += deltax;
_zoomxy [1] += deltay;
(_length == 1 && newWidth <winw || newWidth <winw) && (_ zoomxy [0] = 0);
(_length == 1 && newheight <winh || newheight <winh) && (_ zoomxy [1] = 0);
$ (img) .css ({"-webkit-transform": "scale (" + _zoom + ") แปล (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoom + ") แปล (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)"})
}อื่น{
if (! isslide) return;
var deltax = e.pagex - _start [0];
(_transx> 0 || _transx <-winw * (_length - 1)) && (deltax /= 4);
_transx = -_index * winw + deltax;
_this.find (". pv-inner"). css ({"-webkit-transform": "แปล (" + _transx + "px, 0px) translatez (0)"});
-
-
touchend: ฟังก์ชั่น (e) {
if (iSdoublezoom) {
กลับ;
-
ถ้า (_zoom! = 1) {
if (! 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;
if (_length> 1 && borderx> = 0) {
var updateDelta = 0;
var switchdelta = winw / 6;
if (_zoomxy [0] <-borderx - switchdelta / _zoom && _index <_length - 1) {
UPDATEDELTA = 1;
} อื่นถ้า (_zoomxy [0]> borderx + switchdelta / _zoom && _index> 0) {
updateDelta = -1;
-
if (updateDelta! = 0) {
Scaledown (IMG);
ChangeIndex (_index + updateDelta);
กลับ
-
-
var delta = date.now () - _orgtime;
if (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 ลูกบาศก์เบส (0.08,0.65,0.79,1)", "การเปลี่ยนแปลง": "400ms ลูกบาศก์เบส (0.08,0.65,0.79,1)"}) "
} อื่น{
$ (img) .css ({"-webkit-transition": "200ms linear", "transition": "200ms linear"});
-
if (borderx> = 0) {
if (_zoomxy [0] <-borderx) {
_zoomxy [0] = -borderx;
} อื่นถ้า (_zoomxy [0]> borderx) {
_zoomxy [0] = BorderX;
-
-
ถ้า (Bordery> 0) {
if (_zoomxy [1] <-bordery) {
_zoomxy [1] = -bordery;
} อื่นถ้า (_zoomxy [1]> Bordery) {
_zoomxy [1] = Bordery;
-
-
if (math.abs (_zoomxy [0]) <10) {
$ (img) .css ({"-webkit-transform": "สเกล (" + _zoom + ") แปล (0px," + _zoomxy [1] + "px)", "แปลง": "สเกล (" + _zoom + ") แปล (0px,"
กลับ
} อื่น{
$ (img) .css ({"-webkit-transform": "scale (" + _zoom + ") แปล (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoom + " + "px)"});
-
isDrag = false
}อื่น{
if (! isslide) {return;}
var deltax = _transx - -_index * winw;
var updateDelta = 0;
if (deltax> 50) {
updateDelta = -1;
} อื่นถ้า (deltax <-50) {
UPDATEDELTA = 1;
-
_index = _index+updateDelta;
ChangeIndex (_index);
isslide = false
-
-
คลิก: ฟังก์ชั่น (e) {
_zoom = 1;
_zoomxy = [0,0];
_this.css ("ความทึบ", "0");
timer = settimeout (function () {
_this.css ({"แสดง": ""}). html ("");
ปลด ();
}, 150)
-
dobeltap: ฟังก์ชัน (e) {
ClearTimeout (ตัวจับเวลา);
var now = วันที่ใหม่;
ถ้า (ตอนนี้ - _lasttapdate <500) {
กลับ;
-
_lasttapdate = ตอนนี้;
var img = getimg ();
ถ้า (! img) {
กลับ;
-
ถ้า (_zoom! = 1) {
Scaledown (IMG);
}อื่น{
ScaleUp (IMG);
-
-
setView: function (e) {
winw = window.innerWidth;
winh = window.innerHeight;
_this.width (window.innerWidth) .Height (window.innerHeight);
แปล ((-_ index*window.innerWidth), 0,0, $ (". pv-inner") [0]);
Scaledown (getimg ())
-
-
var handlevent = function (e) {
สวิตช์ (e.type) {
กรณี "TouchStart":
Event.touchstart (E);
หยุดพัก;
กรณี "touchmove":
Event.touchmove (E);
หยุดพัก;
กรณี "TouchCancel":
กรณี "touchend":
Event.touchend (E);
หยุดพัก;
กรณี "OrientationChange":
กรณี "ปรับขนาด":
Event.setView (E);
หยุดพัก
-
-
-
* เหตุการณ์ที่มีผลผูกพัน
-
var bind = function () {
_this.on ("singletap", ฟังก์ชั่น (e) {
E.preventDefault ();
var now = วันที่ใหม่;
ถ้า (ตอนนี้ - _lasttapdate <500) {
กลับ;
-
_lasttapdate = ตอนนี้;
Event.Click (E);
กลับเท็จ;
}). on ("doubleTap", ฟังก์ชั่น (e) {
E.preventDefault ();
Event.dobeltap (E);
กลับเท็จ;
-
_this.on ("TouchStart TouchMove Touchend Touchend", function (e) {
HandleEvent (E);
-
Event.setView ();
"Onorientationchange" ในหน้าต่าง? window.addeventListener ("OrientationChange", Event.setView, False): window.addeventListener ("Resize", Event.setView, False);
-
-
* กิจกรรมการวางจำหน่าย
-
var unbind = function () {
_this.off ();
"Onorientationchange" ในหน้าต่าง? Window.RemoveEventListener ("OrientationChange", Event.setView, False): Window.RemoveEventListener ("Resize", Event.setView, False)
-
var getDist = function (x1, y1, x2, y2) {
return math.sqrt (math.pow (x2 - x1, 2) + math.pow (y2 - y1, 2), 2)
-
-
* ภาพซูม
-
var getscale = function (img) {
var h = img.naturalheight, w = img.naturalwidth,
scale = w*h/(img.clientheight*img.clientWidth);
มาตราส่วนกลับ;
-
var scaleup = function (img) {
var scale = getScale (img);
ถ้า (มาตราส่วน> 1)
$ (img) .css ({"-webkit-transform": "สเกล (" + สเกล + ")", "แปลง": "สเกล (" + สเกล + ")", "-webkit-transition": "200ms", "transition": "200ms"});
_zoom = สเกล;
-
var scaledown = function (img) {
_zoom = 1;
_zoomxy = [0, 0];
_doubledistorg = 1;
_doublezoomorg = 1;
$ (IMG) .CSS ({"-WebKit-Transform": "Scale (1)", "Transform": "Scale (1)", "-WebKit-Transition": "200ms", "transition": "200ms"});
-
-
* เอฟเฟกต์เลื่อน
* Dist
-
var translate = function (distx, disty, ความเร็ว, ele) {
if (!! ele) {ele = ele.style; } else {return; -
Ele.WebKitTransitionDuration = Ele.MozTransitionDuration = Ele.MSTRANSITIONDURATION = ELE.OTRANSITIONDURATION = Ele.TransitionDuration = ความเร็ว + 'MS';
ele.webkittransform = 'แปล (' + distx + 'px,' + disty + 'px)' + 'translatez (0)';
ele.msTransform = ele.mozTransform = ele.otransform = 'translatex (' + distx + 'px) translateey (' + disty + 'px)';
-
-
* เปลี่ยนดัชนี value_index
-
var changeindex = function (ดัชนี, force) {
ถ้า (ดัชนี <0) {
ดัชนี = 0;
} อื่นถ้า (ดัชนี> = _Length) {
index = _length - 1;
-
_index = ดัชนี;
แปล ((-_ index*window.innerWidth), 0, force? "0": "200", $ (". pv-inner") [0]);
$ ("#j_index"). html (_index+1+"/"+_ ความยาว);
imgload ();
-
-
* การได้มาภาพ
-
var getimg = function (ดัชนี) {
var img = _this.find ("li"). eq (ดัชนี || _index) .find ("img");
if (img.size () == 1) {
return img [0];
}อื่น{
คืนค่า NULL
-
-
-
* การโหลดรูปภาพ
-
var imgload = function () {
if ($ (". pv-img"). eq (_index) .find ("img") [0]) {
$ ("#j_loading"). CSS ("แสดง", "");
กลับ;
}อื่น{
$ ("#j_loading"). CSS ("แสดง", "block");
var tempimg = image ใหม่ (), w, h, set;
tempimg.src = _imgdata [_index];
$ (". pv-img"). eq (_index) [0] .appendchild (tempimg);
tempimg.onload = function () {
$ ("#j_loading"). CSS ("แสดง", "");
-
-
-
-
* สร้างภาพขนาดใหญ่เพื่อดูโครงสร้างโดม
-
var create = function () {
_This.Append ("<span class = 'pv-inner'> </ul>"). ผนวก ("<p class = 'counts'> <span class = 'value' id = 'j_index'>"+(_ _ _ 1)+"/"+_ ความยาว+"</span> </p>") class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> "
สำหรับ (var i = 0; i <_length; i ++) {
$ (". pv-inner"). ผนวก ("<li class = 'pv-img'> </li>")
-
imgload ();
-
-
* ภาพขนาดใหญ่เพื่อดูการเริ่มต้น
-
var init = function () {
!! _ นี่ [0] || $ ("ร่างกาย"). ผนวก ("<div class = 'slide-view' id = 'slideView'> </div>");
_this = $ ("#slideview");
($ .OS.IPHONE || $ .OS.ANDROID && PARSEFLOAT ($. OS.Version)> = 4) && (_ AdvancedSupport = TRUE);
-
-
* ดูฟังก์ชัน Return Interface ในภาพขนาดใหญ่
* ImageView (ดัชนีข้อมูล)
* ดัชนีค่าดัชนีเริ่มต้น nubmer
* อาร์เรย์อาร์เรย์รูปภาพข้อมูล
-
var imageView = function (index, data) {
_imgdata = ข้อมูล;
_index = ดัชนี;
_length = data.length;
// สร้างโครงสร้าง DOM
สร้าง();
// การแสดงโครงสร้าง DOM
_this.css ("แสดง", "block");
// เหตุการณ์ที่มีผลผูกพัน
ผูก();
-
ส่งคืน ImageView;
}) (หน้าต่าง, Zepto);
รหัส CSS ที่ใช้โดย ImageView.js มีดังนี้:
การคัดลอกรหัสมีดังนี้:
/*มุมมองภาพขนาดใหญ่*/
.Slide-view {พื้นหลัง: #000; ตำแหน่ง: คงที่; ความกว้าง: 100%; ความสูง: 100%; ล้น: ซ่อน; ด้านบน: 0; ซ้าย: 0; z-index: 100; opacity: 0; แสดง: ไม่มี; -webkit-animation: fadein .2 ไม่มี; -webkit-transform-style: Preserve-3d; -
.Slide-view .Counts {ตำแหน่ง: Absolute; Top: 5%; ซ้าย: 0; ขวา: 0; Text-Align: Center; Font-Size: 0; -webkit-transform-style: Preserve-3d; -
.Slide-View .Counts .Value {Border-Radius: 9px; Line-Height: 18px; การเติม: 0 6px; Font-Size: 11px; แสดง: Inline-Block; พื้นหลัง-สี: RGBA (102,102,102, .6); สี: #F1F1F1;
.pv-inner {ตำแหน่ง: สัมพัทธ์; z-index: -1; display: -webkit-box; display: box; width: 100%; ความสูง: 100%;-webkit-transition: 350ms linear; -webkit-backface-visibility: Hidden; ไม่มี; -webkit-transform-style: Preserve-3d; -
.pv-inner li {text-allign: center; display: -webkit-box; display: box; -webkit-box-allign: center; overflow: hidden; ความกว้าง: 100%; ความสูง: 100%;-webkit-touch-callout: ไม่มี; backface-visibility -
.pv-inner img {max-width: 97%; สูงสุด-สูง: 100%;-webkit-transform: มาตราส่วน (1) แปล (0px, 0px); การถ่ายทอด: สเกล (1) แปล (0px, 0px); ไม่มี; display: block; margin: 0 auto; backface-visibility: hidden; -webkit-transform-style: Preserve-3d; -
@-webkit-keyframes fadein {
0%{ความทึบ: 0;}
100%{ความทึบ: 1;}
-
@KeyFrames Fadein {
0%{ความทึบ: 0;}
100%{ความทึบ: 100%;}
-
/*-------------------- โหลด -----------------------*//
.ui -loading {ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: 50%; แสดง: ไม่มี;
.ui-loading i {display: inline-block; ความกว้าง: 5px; ความสูง: 12px; พื้นหลัง: #ffff; แนวตั้ง-แนวตั้ง: top; -webkit-animation: การโหลด-สปิน 1S infinite linear; ภาพเคลื่อนไหว
.ui-loading i {-webkit-animation: การโหลด-spin 1s infinite linear; ภาพเคลื่อนไหว: การโหลด-spin 1s infinite linear}
.ui-loading i.t2 {margin: 0 3px; -webkit-animation-name: โหลด-spin-one; animation-name: loading-spin-one}
.ui-loading i.t3 {-webkit-animation-name: การโหลด-หมุน-สอง;
@-webkit-keyframes โหลด-หมุน {
0% {ความทึบ: 0}
30% {ความทึบ: 1; -webkit-transform: Scale (1,1.2)}
60% {ความทึบ: 0; -webkit-transform: Scale (1)}
100% {ความทึบ: 0}
-
@-webkit-keyframes โหลด-สปริง-หนึ่ง {
0% {ความทึบ: 0}
20% {ความทึบ: 0}
50% {ความทึบ: 1; -webkit-transform: Scale (1,1.2)}
80% {ความทึบ: 0; -webkit-transform: Scale (1)}
100% {ความทึบ: 0}
-
@-webkit-keyframes โหลด-หมุน-สอง {
0% {ความทึบ: 0}
40% {ความทึบ: 0}
70% {Opacity: 1; -webkit-transform: Scale (1,1.2)}
100% {ความทึบ: 0; -webkit-transform: Scale (1)}
-
@KeyFrames โหลด-spin {
0% {ความทึบ: 0}
30% {Opacity: 1; Transform: Scale (1,1.2)}
60% {ความทึบ: 0; แปลง: สเกล (1)}
100% {ความทึบ: 0}
-
@KeyFrames loading-spin-one {
0% {ความทึบ: 0}
20% {ความทึบ: 0}
50% {ความทึบ: 1; แปลง: สเกล (1,1.2)}
80% {ความทึบ: 0; แปลง: สเกล (1)}
100% {ความทึบ: 0}
-
@KeyFrames โหลด-spin-two {
0% {ความทึบ: 0}
40% {ความทึบ: 0}
70% {ความทึบ: 1; แปลง: สเกล (1,1.2)}
100% {ความทึบ: 0; แปลง: สเกล (1)}
-
/*-------------------- โหลด-end ----------------------*//
PS: ฟังก์ชั่นรหัสค่อนข้างง่ายและอาจมีปัญหามากมาย แต่สามารถใช้งานได้แทบจะไม่
ต่อไปนี้เป็นตัวอย่างของการใช้ imageView.js:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ระดับต่ำสุด = 1.0, ระดับสูงสุด = 1.0, ผู้ใช้-ลดขนาด = no">>
<title> มุมมองภาพขนาดใหญ่มือถือ </title>
<script type = "text/javascript" src = "test_files/zepto.min.js">/script>
<script type = "text/javascript" src = "test_files/imageView.js">/script>/script>
</head>
<body>
<!-ด้านบนคือโครงสร้างหน้า HTML->
<!-ต่อไปนี้เป็นตัวอย่างของการใช้ ImageView->
<script>
;(การทำงาน(){
// รับองค์ประกอบภาพใน html
var aimg = document.QuerySelectorAll ("IMG")
aimgsrc = [];
// ผูกเหตุการณ์คลิกสำหรับภาพ
สำหรับ (var i = 0, l = aimg.length; i <l; i ++) {
AIMG [i] .index = i;
AIMG [i] .className+= "Conpic";
Aimgsrc.push (AIMG [I] .SRC);
-
สำหรับ (var i = 0; i <$ (". conpic"). ความยาว; i ++) {
ถ้า ($ (". Conpic") [i] .Complete) {
AddTap ($ (". Conpic") [i])
}อื่น{
$ (". conpic") [i] .onload = function () {
addtap (นี่);
-
-
-
ฟังก์ชั่น addtap (obj) {
$ (obj) .on ("tap", function () {
// เรียก imageView
ImageView ($ (OBJ) [0] .index, AIMGSRC);
-
-
-
</script>
</body>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าคุณจะชอบมัน