طريقة الاتصال: ImageView (الفهرس ، imgdata) -المعلمة المؤسسة هي قيمة الفهرس التي يتم عرضها بواسطة الصورة الافتراضية ، النوع هو رقم -المعلمة Imadata هي صفيف عنوان URL للصور ، النوع هو صفيف
قبل استخدامه ، يجب أولاً استيراد ملف zepto.js
رمز ImageView.js محدد هو كما يلي:
نسخة الكود كما يلي:
/*
* ImageView v1.0.0
* -صورة -بيج بناء على zepto.js
* -طريقة الاستدعاء ImageView (الفهرس ، imgdada)
* -مؤشر فهرس عرض القيمة الافتراضية للتقاط الصور ، رقم -صفيف عنوان URL IMGDATA ، صفيف
* */
var imageView = (function (window ، $) {
var _this = $ ("#slideview") ، _ imgdata = [] ، _ index = 0 ، _length = 0 ،
_start = [] ، _ org = [] ، _ orgtime = null ،
_lasttapdate = خالية ،
_zoom = 1 ، _zoomxy = [0،0] ، _ transx = null ،
_AdvancedSupport = خطأ ،
_doubledistorg = 1 ، _doublezoomorg = 1 ، iSdoublezoom = خطأ ،
ISSLIDE = TRUE ، ISDRAG = FALSE ، TIMER = NULL ،
winw = window.innerwidth ، winhh = window.innerheight ؛
/**
* حدث كائن الحدث
*/
var event = {
TouchStart: Function (E) {
E.PreventDefault () ؛
if (_advancedSupport && e.touches && e.touches.length> = 2) {
var img = getImg () ؛
$ (img) .css ({"-webkit-transitionDuration": "0ms" ، "TransitionDuration": "0ms"}) ؛
_doublezoomorg = _zoom ؛
_doubledistorg = getDist (
iSdoublezoom = صحيح ؛
يعود
}
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 ؛
if (_zoom! = 1) {
_zoomxy = _zoomxy || [0 ، 0] ؛
_orgzoomxy = [_zoomxy [0] ، _zoomxy [1]] ؛
var img = getImg () ؛
img && ($ (img) .css ({"-webkit-transitionDuration": "0ms" ، "TransitionDuration": "0ms"})) ؛
isDrag = صحيح
}آخر{
_this.find (". PV-Inner").
ISSLIDE = صحيح
}
} ،
touchmove: وظيفة (هـ) {
E.PreventDefault () ؛
if (_advancedSupport && e.touches && e.touches.length> = 2) {
var newdist = getDist (
_zoom = (newdist/_doubledistorg) * _doublezoomorg
var img = getImg () ؛
$ (img) .css ({"-webkit-transitionDuration": "0ms" ، "TransitionDuration": "0ms"}) ؛
if (_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 ؛
if (_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 ،
الحدود = (newheight - winh) / 2 / _zoom ؛
(borderx> = 0) && (_ zoomxy [0] <-borderx || _zoomxy [0]> borderx) && (deltax /= 3) ؛
(Bordery> 0) && (_ Zoomxy [1] <-bordery || _zoomxy [1]> الحدود) && (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)"})
}آخر{
إذا (! isslide) العودة ؛
var deltax = e.pagex - _start [0] ؛
(_transx> 0 || _transx <-winw * (_length - 1)) && (deltax /= 4) ؛
_transx = -_index * winw + deltax ؛
_this.find (". pv-inner").
}
} ،
Touchend: Function (e) {
if (iSdoublezoom) {
يعود؛
}
if (_zoom! = 1) {
if (! isdrag) {return ؛}
var img = getImg () ؛
var newwidth = img.clientwidth *_zoom ،
newheight = img.clientheight * _zoom ؛
var borderx = (newwidth - winw) / 2 / _zoom ،
الحدود = (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 ؛
إذا (دلتا <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) "})
} آخر{
$ (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 ؛
}
}
إذا (الحدود> 0) {
if (_zoomxy [1] <-bordery) {
_zoomxy [1] = -bordery ؛
} آخر إذا (_zoomxy [1]> الحدود) {
_zoomxy [1] = الحدود ؛
}
}
if (math.abs (_zoomxy [0]) <10) {
$ (img) .css ({"-webkit-transform": "Scale (" + _zoom + ") ترجمة (0px ،" + _zoomxy [1] + "px)" ، "transform": "Scale (" + _zoom + ") ترجمة (0px ،" + _zoomxy [1] + "px)"}) ؛
يعود
} آخر{
$ (img) .css ({"-webkit-transform": "Scale (" + _zoom + ") ترجمة (" + _zoomxy [0] + "px ،" + _zoomxy [1] + "px)" ، "transform": "Scale (" + _zoom + ") ترجمة ( "px)"}) ؛
}
isDrag = خطأ
}آخر{
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 = خطأ
}
} ،
انقر: وظيفة (هـ) {
_zoom = 1 ؛
_zoomxy = [0،0] ؛
_THIS.CSS ("عتامة" ، "0") ؛
Timer = setTimeOut (function () {
_THIS.CSS ({"display": ""}). html ("") ؛
unfind () ؛
} ، 150)
} ،
DoBeltap: Function (E) {
ClearTimeout (مؤقت) ؛
var الآن = تاريخ جديد ؛
if (الآن - _lasttapdate <500) {
يعود؛
}
_lasttapdate = الآن ؛
var img = getImg () ؛
إذا (! img) {
يعود؛
}
if (_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":
حالة "اللمس":
event.touchend (e) ؛
استراحة؛
حالة "اتجاه التوجيه":
حالة "تغيير الحجم":
event.setView (e) ؛
استراحة
}
} ؛
/**
* أحداث ملزمة
*/
var bind = function () {
_This.on ("Singletap" ، وظيفة (E) {
E.PreventDefault () ؛
var الآن = تاريخ جديد ؛
if (الآن - _lasttapdate <500) {
يعود؛
}
_lasttapdate = الآن ؛
event.click (e) ؛
العودة كاذبة
}). on ("doubletap" ، function (e) {
E.PreventDefault () ؛
event.dobeltap (e) ؛
العودة كاذبة
}) ؛
_ this.on (
مقبض (E) ؛
}) ؛
event.setView () ؛
"onorientationchange" في النافذة؟ Window.AdDeventListener ("TonaceationChange" ، event.setView ، false): window.adDeventListener ("Risze" ، event.setView ، false) ؛
} ؛
/**
* حدث الإصدار
*/
var unbind = function () {
_ this.off () ؛
"onorientationchange" في النافذة؟ Window.RemoveEventListener ("TonaceNchange" ، event.setview ، false): window.removeeventListener ("Resize" ، event.setView ، false)
} ؛
var getDist = function (x1 ، y1 ، x2 ، y2) {
إرجاع 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": "Scale (" + Scale + ")" ، "Transform": "Scale (" + Scale + ")" ، "-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 ، speed ، ele) {
if (!! ele) {ele = ele.style ؛ } آخر {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)' ؛
} ؛
/**
* تغيير الفهرس value_index
*/
var changeIndex = function (الفهرس ، القوة) {
إذا (الفهرس <0) {
الفهرس = 0 ؛
} آخر إذا (index> = _length) {
index = _length - 1 ؛
}
_index = index ؛
ترجمة ((-_ index*window.innerwidth) ، 0 ، القوة؟ "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) {
إرجاع IMG [0] ؛
}آخر{
العودة لاغية
}
}
/**
* تحميل الصورة
*/
var imgload = function () {
if ($ (". pv-img"). Eq (_index) .find (
$ ("#j_loading"). css ("display" ، "") ؛
يعود؛
}آخر{
$ ("#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" ، "") ؛
}
}
} ؛
/**
* قم بإنشاء صورة كبيرة لعرض بنية القبة
*/
var create = function () {
_this.append ("<span class = 'pv inner'> </ul>"). إلحاق ("<p class = 'counts'> <span class = 'value' id = 'j_index'>"+(_ index+1)+"/" _ _ length+"</p> </p>"). class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
لـ (var i = 0 ؛ i <_length ؛ i ++) {
$ (".
}
imgload () ؛
} ؛
/**
* صورة كبيرة لعرض التهيئة
*/
var init = function () {
!!
_ This = $ ("#slideview") ؛
($ .os.iphone || $ .os.android && parsefloat ($. os.version)> = 4) && (_ AdvancedSupport = true) ؛
} () ؛
/**
* عرض وظيفة واجهة الإرجاع في صورة كبيرة
* ImageView (الفهرس ، البيانات)
* فهرس فهرس الفهرس القيمة nubmer
* صفيف صورة صورة البيانات
*/
var imageView = function (index ، data) {
_imgdata = البيانات ؛
_index = index ؛
_length = data.length ؛
// إنشاء بنية DOM
يخلق()؛
// عرض بنية DOM
_THIS.CSS ("Display" ، "block") ؛
// الحدث الملزم
ربط()؛
}
إرجاع ImageView ؛
}) (نافذة ، Zepto) ؛
رمز CSS المستخدمة بواسطة ImageView.js كما يلي:
نسخة الكود كما يلي:
/*عرض الصورة الكبيرة*/
.slide-View {background: #000 ؛ الموضع: ثابت ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ فائض: مخفي ؛ الأعلى: 0 ؛ اليسار: 0 ؛ لا شيء ؛ -webkit-transform-style: Preserve-3D ؛ }
.slide-view .counts {position: absolute ؛ top: 5 ٪ ؛ اليسار: 0 ؛ اليمين: 0 ؛ align text: center ؛ font-size: 0 ؛ -webkit-transform-style: preserve-3d ؛ }
.slide-view .counts .value {border-radius: 9px ؛ خط الارتفاع: 18px ؛ الحشو: 0 6px ؛ حجم الخط: 11px ؛ العرض: inline block ؛ الخلفية اللون: rgba (102،102،102 ، .6) ؛ اللون: #f1f1 ؛}
.pv-Inner {الموضع: النسبية ؛ z-index: -1 ؛ العرض: -webkit-box ؛ العرض: مربع ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛-WebKit-Transition: All 350ms Linear ؛ -Webkit-Backface- لا شيء ؛ -webkit-transform-style: Preserve-3D ؛ }
.pv-Inner li {text-align: center ؛ display: -webkit-box ؛ display: box ؛ -webkit-box-align: center ؛ overflow: hidden ؛ width: 100 ٪ ؛ leight: 100 ٪ ؛-webkit-touch-callout: none ؛ backface-visibility: hidden ؛ -Webkit-romsform-style: }
.pv-Inner img {max-width: 97 ٪ ؛ max-height: 100 ٪ ؛-WebKit-transform: Scale (1) Translate (0px ، 0px) ؛ transability: Scale (1) Translate (0px ، 0px) ؛ كتلة ؛ الهامش: 0 auto ؛ backface-sitibility: hidden ؛ -webkit-transform-style: preserve-3d ؛ }
@-webkit-keyframes fadein {
0 ٪ {عتامة: 0 ؛}
100 ٪ {عتامة: 1 ؛}
}
keyframes fadein {
0 ٪ {عتامة: 0 ؛}
100 ٪ {عتامة: 100 ٪ ؛}
}
/*--------------------تحميل-----------------------*/
.
.ui-loading i {display: inline block ؛ العرض: 5px ؛ الارتفاع: 12px ؛ الخلفية: #ffff ؛ align align: top ؛ -webkit-animation: loading-spin 1s infinite linear ؛
.ui-loading i {-webkit-animation: loading-spin 1s linfinite linear ؛ الرسوم المتحركة: loading-spin 1s linear}
.ui-loading i.t2 {margin: 0 3px ؛ -webkit-animation-name: loading-spin-One ؛
.ui-loading
@-webkit-keyframes تحميل spin {
0 ٪ {عتامة: 0}
30 ٪ {عظمة: 1 ؛ -webkit-transform: Scale (1،1.2)}
60 ٪ {عتامة: 0 ؛ -webkit-transform: Scale (1)}
100 ٪ {عتامة: 0}
}
@-webkit-keyframes loading-spin-one {
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 ٪ {عتامة: 1 ؛ -webkit-transform: Scale (1،1.2)}
100 ٪ {عتامة: 0 ؛ -webkit-transform: Scale (1)}
}
keyframes loading-spin {
0 ٪ {عتامة: 0}
30 ٪ {عتامة: 1 ؛ التحويل: المقياس (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 loading-spin-two {
0 ٪ {عتامة: 0}
40 ٪ {عتامة: 0}
70 ٪ {عتامة: 1 ؛ التحويل: المقياس (1،1.2)}
100 ٪ {عتامة: 0 ؛ تحويل: المقياس (1)}
}
/*---------------------ending ----------------------*/
ملاحظة: وظيفة الكود بسيطة نسبيًا وقد تكون هناك العديد من المشكلات. ولكن يمكن استخدامه بالكاد
فيما يلي مثال على استخدام ImageView.js:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = width device ، scale scale = 1.0 ، minimate-scale = 1.0 ، maximum scale = 1.0 ، user-scalable = no">
<title> عرض صورة متنقل كبير </title>
<script type = "text/javaScript" src = "test_files/zepto.min.js">/script>
<script type = "text/javaScript" src = "test_files/imageview.js">/script>
</head>
<body>
<!-ما سبق هو بنية صفحة HTML->
<!-فيما يلي مثال على استخدام ImageView->
<script>
؛(وظيفة(){
// احصل على عناصر الصورة في HTML
var AIMG = document.queryselectall ("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 ++) {
if ($ (". 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>
ما سبق هو المحتوى الكامل لهذه المقالة. أتمنى أن تعجبك