Осознайте эффект:
Код стиля CSS отсутствует.
HTML -код:
jquery.mobile и jQuery импортируются на странице
Кода -копия выглядит следующим образом:
<script src = "http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src = "http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"> </script>
Кода -копия выглядит следующим образом:
<div id = "pageslide">
<input type = "hidden" value = "" id = "captcha"/>
<div id = "слайдер">
<span id = "Метка"> </span>
<span id = "labletip"> Слайд, чтобы подтвердить, что я человек! </span>
</div>
</div>
JS -код:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
window.onload = function () {
var slider1 = new Slider ();
slider1.init ();
/// запускается при изменении размера экрана
$ (window) .resize (function () {
Slider1.handerin ();
slider1.handerout ();
});
}
// скользящий бар объект
Function Slider (SwipeStart, Min, Max, Index, Isok, LableIndex) {
var _self = это;
// переключение или нет
_self.swipestart = SwipeStart;
// минимальное значение
_self.min = min;
// максимальное значение
_self.max = max;
// текущее положение слайдера
_self.index = index;
// успешно ли слайд
_self.isok = isok;
// мышь находится в положении кнопки слайда
_self.lableIndex = lableIndex;
}
// инициализация
Slider.prototype.init = function () {
var _self = это;
$ ("#label"). On ("mousedown", function (event) {
var e = event || window.event;
_self.lableIndex = e.clientx - this.offsetleft;
_self.handerin ();
});
$ ("#pageslide"). On ("mouseMove", function (event) {
_self.handermove (событие);
});
$ (документ) .on ("mouseUp", function (event) {
_self.handerout ();
});
$ ("#label"). On ("touchStart", function (event) {
var e = event || window.event;
_self.lableIndex = e.originalevent.pagex - this.offsetleft;
_self.handerin ();
});
$ ("#pageslide"). On ("touchmove", function (event) {
_self.handermove (Event, "Mobile");
});
$ (документ) .on ("touchend", function (event) {
_self.handerout ();
});
}
// мышь/пальцем касается кнопки скольжения
Slider.prototype.handerin = function () {
var _self = это;
_self.swipestart = true;
_self.min = 0;
_self.max = $ ("#slider"). Width ();
}
// мышь/пальцем
Slider.prototype.handerout = function () {
var _self = это;
//останавливаться
_self.swipestart = false;
_self.move ();
}
// мышь/пальцы двигаться
Slider.prototype.handermove = function (event, type) {
var _self = это;
if (_self.swipestart) {
Event.preventDefault ();
var Event = Event || window.event;
if (type == "mobile") {
_self.index = event.originalevent.pagex - _self.lableIndex;
} еще {
_self.index = event.clientx - _self.lableIndex;
}
_self.move ();
}
}
// мышь/пальцем
Slider.prototype.move = function () {
var _self = это;
$ (". Warn"). Text ("index:" + _self.index + ", max" + _self.max + ", lableIndex:" + _self.lableIndex + ", значение:" + $ ("#captcha"). val () + "Дата:" + новая дата (). getUtcdate ());
if ((_self.index + 20)> = _self.max) {
_self.index = _self.max - 20;
}
if (_self.index <0) {
_self.index = _self.min;
}
$ (".
if (_self.index == (_self.max - 20)) {
//останавливаться
_self.swipestart = false;
_self.isok = true; // разблокировать
$ ("#captcha"). Val (1);
var style = {"filter": "alpha (непрозрачность = 1)",
"-moz-opcytion": "1", "непрозрачность": "1"}
$ (". ui-btn.ui-input-btn.ui-corner-all.ui-shadow"). CSS (стиль);
$ ("#slider"). CSS ("фоновый цвет", "#e5ee9f");
$ ("#labletip"). Текст ("Спасибо!");
} еще {
_self.isok = false; // разблокирован
$ ("#captcha"). Val (0);
var style = {"filter": "alpha (непрозрачность = 0,2)",
"-moz-opbytance": "0,2", "непрозрачность": "0,2"}
$ (". ui-btn.ui-input-btn.ui-corner-all.ui-shadow"). CSS (стиль);
$ ("#slider"). CSS ("фоновый цвет", "#fdeb9c");
$ ("#labletip"). Текст ("Слайд, чтобы подтвердить, что я человек!");
}
}
</script>
Эффекты реализованы: