Метод вызова: ImageView (index, imgdata) -index parameter -это значение индекса, отображаемое изображением по умолчанию, тип -number -Aimadata Параметр -это массив URL -адреса изображения, тип -массив
Перед его использованием вы должны сначала импортировать файл Zepto.js
Конкретный код ImageView.js выглядит следующим образом:
Кода -копия выглядит следующим образом:
/*
* ImageView v1.0.0
* -Big Image на основе Zepto.js
* -Метод обезживания ImageView (index, imgdada)
* -Индекс значения значения по умолчанию, номер, номер -Имгдата
* */
var ImageView = (function (window, $) {
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: 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 (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 = -_индекс * 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 = true
}еще{
_This.find (". PV-inner"). CSS ({"-webkit-transitionDuration": "0ms", "TransitionDuration": "0ms"});
ISSLIDE = true
}
},
Touchmove: function (e) {
e.preventdefault ();
if (_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"});
if (_zoom <1) {
_zoom = 1;
_zoomxy = [0, 0];
$ (img) .css ({"-webkit-transitionduration": "200 мс", "TransitionDuration": "200 мс"})
} else if (_zoom> getscale (img) * 2) {
_zoom = getScale (img) * 2;
}
$ (img) .css ({"-webkit-transform": "scale (" + _zoom + ") translate (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "Transform": "Scale (" + _zoom + ") Translate (" + _zoomxy [0] " +" + " +" + " + _zyom". "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,
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 + ") translate (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)", "Transform": "Scale (" + _zoom + ") translate (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)"})
}еще{
if (! Isslide) возврат;
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": "translate (" + _transx + "px, 0px) transtatez (0)"});
}
},
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,
bordery = (newheight - winh) / 2 / _zoom;
if (_length> 1 && borderx> = 0) {
var upendElta = 0;
var switchdelta = winw / 6;
if (_zoomxy [0] <-borderx - switchdelta / _zoom && _index <_length - 1) {
UpdatedElta = 1;
} else if (_zoomxy [0]> borderx + switchdelta / _zoom && _index> 0) {
updatedelta = -1;
}
if (upendetelta! = 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": "400 мс кубик-бизье (0,08,0,65,0,79,1)", "Переход": "400 мс кубик (0,08,0,65,0,79,1)"})
} еще{
$ (img) .css ({"-webkit-transition": "200 мс линейно", "переход": "200 мс линейно"});
}
if (borderx> = 0) {
if (_zoomxy [0] <-borderx) {
_zoomxy [0] = -borderx;
} else if (_zoomxy [0]> borderx) {
_zoomxy [0] = borderx;
}
}
if (bordery> 0) {
if (_zoomxy [1] <-bordery) {
_zoomxy [1] = -bordery;
} else if (_zoomxy [1]> bordery) {
_zoomxy [1] = Bordery;
}
}
if (math.abs (_zoomxy [0]) <10) {
$ (img) .css ({"-webkit-transform": "scale (" + _zoom + ") translate (0px," + _zoomxy [1] + "px)", "Transform": "Scale (" + _zoom + ") translate (0px," + _zoomxy [1] + "px)"});
Возвращаться
} еще{
$ (img) .css ({"-webkit-transform": "scale (" + _zoom + ") translate (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "Transform": "Scale (" + _zoom + ") Translate (" + _zoomxy [0] " +" + " +" + " + _zyom". "px)"});
}
isdrag = false
}еще{
if (! Isslide) {return;}
var deltax = _transx - -_index * winw;
var upendElta = 0;
if (deltax> 50) {
updatedelta = -1;
} else if (deltax <-50) {
UpdatedElta = 1;
}
_index = _index+updatedElta;
changeIndex (_index);
ISSLIDE = false
}
},
Нажмите: function (e) {
_zoom = 1;
_zoomxy = [0,0];
_This.css ("непрозрачность", "0");
timer = settimeout (function () {
_This.css ({"display": ""}). html ("");
unbind ();
}, 150)
},
dobeltap: function (e) {
ClearTimeout (таймер);
var теперь = новая дата;
if (теперь - _lasttapdate <500) {
возвращаться;
}
_lasttapdate = сейчас;
var img = getimg ();
if (! img) {
возвращаться;
}
if (_zoom! = 1) {
SCALEDOWN (IMG);
}еще{
ScaleUp (IMG);
}
},
setView: function (e) {
winw = window.innerwidth;
winh = window.innerheight;
_This.width (window.innerwidth) .height (window.innerheight);
translate ((-_ index*window.innerwidth), 0,0, $ (". Pv-inner") [0]);
Scaledown (getimg ())
}
};
var harderevent = function (e) {
Switch (e.type) {
Case "TouchStart":
Event.touchstart (e);
перерыв;
Case "touchmove":
Event.touchmove (e);
перерыв;
Case "touchCancel":
Случай "Touchend":
Event.touchend (e);
перерыв;
случай "ориентация change":
Случай "Изменение размера":
Event.setView (e);
перерыв
}
};
/**
* Связанные события
*/
var bind = function () {
_this.on ("singletap", function (e) {
e.preventdefault ();
var теперь = новая дата;
if (теперь - _lasttapdate <500) {
возвращаться;
}
_lasttapdate = сейчас;
Event.click (e);
вернуть ложь;
}). On ("DoubleTap", function (e) {
e.preventdefault ();
Event.dobeltap (e);
вернуть ложь;
});
_This.on ("touchStart touchmove touchend touchcancel", function (e) {
Руководитель (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)
}
/**
* Изображение Zoom
*/
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);
if (масштаб> 1)
$ (img) .css ({"-webkit-transform": "Scale (" + Scale + ")", "Transform": "Scale (" + Scale + ")", "-Webkit-Transition": "200 мс", "переход": "200 мс"});
_zoom = Scale;
};
var scaledown = function (img) {
_zoom = 1;
_zoomxy = [0, 0];
_doubledistorg = 1;
_doublezoomorg = 1;
$ (img) .css ({"-webkit-transform": "Scale (1)", "Transform": "Scale (1)", "-Webkit-Transition": "200 мс", "Переход": "200 мс"});
};
/**
* Скользящий эффект
* 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 = 'transtatex (' + distx + 'px) transtey (' + disty + 'px)';
};
/**
* Изменение индекса value_index
*/
var изменение Index = 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+"/"+_ длина);
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 ("img") [0]) {
$ ("#J_loading"). CSS ("Display", "");
возвращаться;
}еще{
$ ("#J_loading"). Css ("Display", "block");
var empimg = new image (), w, h, set;
empimg.src = _imgdata [_index];
$ (". Pv-img"). EQ (_index) [0] .appendChild (TEMPIMG);
empimg.onload = function () {
$ ("#J_loading"). CSS ("Display", "");
}
}
};
/**
* Создайте большое изображение для просмотра структуры купола
*/
var create = function () {
_This.Append ("<span class = 'pv-inner'> </ul>"). Append ("<p class = 'counts'> <span class = 'value' id = 'j_index'>"+(_ Index+1)+"/"+_ Length+"</span> </p>"). class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
for (var i = 0; i <_length; i ++) {
$ (". PV-inner"). Append ("<li class = 'pv-img'> </li>")
}
imgload ();
};
/**
* Большое изображение для просмотра инициализации
*/
var init = function () {
!! _ this [0] || $ ("body"). Append ("<div class = 'slide-view' id = 'slideview'> </div>");
_This = $ ("#slideview");
($ .os.iphone || $ .os.android && parsefloat ($. os.version)> = 4) && (_ ardancedSupport = true);
} ();
/**
* Посмотреть функцию возврата интерфейса в большом изображении
* ImageView (index, data)
* Индекс начального значения индекса Nubmer
* Массив массива изображений данных
*/
var ImageView = function (index, data) {
_Imgdata = data;
_index = index;
_length = data.length;
// Создать структуру DOM
Создавать();
// Dom Structure Display
_this.css ("Display", "block");
// Связанное событие
связывать();
}
вернуть ImageView;
}) (окно, Zepto);
CSS -код, используемый ImageView.js, выглядит следующим образом:
Кода -копия выглядит следующим образом:
/*Большое представление изображения*/
.slide-view {фон: #000; Положение: исправлена; нет; -Webkit-transform-стиль: reverve-3d; }
.slide-view .counts {position: Absolute; Top: 5%; слева: 0; справа: 0; Text-align: Center; размер шрифта: 0; -Webkit-transform-стиль: preverve-3d; }
.slide-view .counts.
.pv-inner {позиция: относительно; z-Index: -1; дисплей: -Webkit-box; дисплей: коробка; ширина: 100%; высота: 100%;-Вебкит-транзиция: все 350 мс линейно; -webkit-backface-visibuity: hidden; переход: все 350 мс линейно; Backface-Visibuity: hidden; -Webkit-touch-call-call-call-call-call-callout:-callout:-callout-callout-callout:-callout-callout-callout-callout- нет; -Webkit-transform-стиль: reverve-3d; }
.pv-inner li {text-align: center; display: -webkit-box; дисплей: коробка; -webkit-box-align: center; переполнен: скрыт; }
.pv-inner img {max-width: 97%; max-height: 100%;-Webkit-Transform: Scale (1) Translate (0px, 0px); Переходность: Scale (1) Translate (0px, 0px); видимость: видно; -Webkit-transe: 200ms; не переход: 200ms; -Webkit-selectemememe-selectemememe-selectememe-selecteme-selectemet-selectememe. Блок; Маржа: 0 Авто; ВИДЕЛЬНОСТЬ ВОЗДЕЙСТВИЯ: Скрыто; -Webkit-Transform-стиль: заповедник-3D; }
@-webkit-keyframes fadein {
0%{непрозрачность: 0;}
100%{непрозрачность: 1;}
}
@keyframes fadein {
0%{непрозрачность: 0;}
100%{непрозрачность: 100%;}
}
/*-------------------- Загрузка -----------------------*/
.UI -погрузчик {Положение: абсолютное; слева: 50%; Верх: 50%; дисплей: нет; вертикальный -Альген: Средний; шрифт: 0/0 Arial; Margin: -5px 0 0 -10px;}
.ui-загрузка i {Display: inline-block; ширина: 5px; высота: 12px; фон: #ffff; вертикальный-вертикальный: вершина; -webkit-animation: нагрузка Spin 1s Infinite Linear; анимация: нагрузка Spin 1s Linear;};}
.ui-загрузка i {-webkit-animation: загрузка Spin 1s Infinite Linear; анимация: нагрузка Spin 1s Infinite Linear}
.UI-погрузчик I.T2 {Margin: 0 3px; -Webkit-animation-name: загрузка-Spin-One; анимация-имени: загрузка-Spin-One}
.UI-погрузчик I.T3 {-webkit-animation-name: загрузка Spin-two; Animation-name: загрузка Spin-two}
@-webkit-keyframes загрузка Spin {
0% {непрозрачность: 0}
30% {непрозрачность: 1; -Webkit-Transform: Scale (1,1,2)}
60% {непрозрачность: 0; -webkit-transform: Scale (1)}
100% {непрозрачность: 0}
}
@-webkit-keyframes загрузка Spin-One {
0% {непрозрачность: 0}
20% {непрозрачность: 0}
50% {непрозрачность: 1; -Webkit-Transform: Scale (1,1,2)}
80% {непрозрачность: 0; -webkit-transform: scale (1)}
100% {непрозрачность: 0}
}
@-webkit-keyframes загружает Spin-two {
0% {непрозрачность: 0}
40% {непрозрачность: 0}
70% {непрозрачность: 1; -Webkit-Transform: Scale (1,1,2)}
100% {непрозрачность: 0; -Webkit-transform: Scale (1)}
}
@keyframes загрузка Spin {
0% {непрозрачность: 0}
30% {непрозрачность: 1; преобразование: масштаб (1,1,2)}
60% {непрозрачность: 0; преобразование: масштаб (1)}
100% {непрозрачность: 0}
}
@keyframes загрузка 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)}
}
/*--------------------
PS: Кодовая функция относительно проста, и может быть много проблем. Но это может быть использовано едва
Ниже приведен пример использования ImageView.js:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = width устройства, начальная масштаба = 1,0, минимальная масштаба = 1,0, максимальная шкала = 1,0, пользовательский шкалевый = нет">
<Teal> Мобильный большой изображение просмотр </title>
<script type = "text/javascript" src = "test_files/zepto.min.js">/script>
<script type = "text/javascript" src = "test_files/imageview.js">/script>
</head>
<тело>
<!-Выше-структура страницы HTML->
<!-Ниже приведен пример использования ImageView->
<Скрипт>
; (function () {
// Получить элементы изображения в HTML
var aimg = document.queryselectorall ("img"),
aimgsrc = [];
// Привязано событие Click для изображения
for (var i = 0, l = aimg.length; i <l; i ++) {
AIMG [i] .index = 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])
}еще{
$ (". Conpic") [i] .onload = function () {
addTap (это);
}
}
}
функция addTap (obj) {
$ (obj) .on ("tap", function () {
// Вызов ImageView
ImageView ($ (obj) [0] .index, aimgsrc);
})
}
}) ();
</script>
</body>
Вышеуказанное - все содержание этой статьи. Надеюсь, тебе понравится