Darse cuenta del efecto:
El código de estilo CSS está ausente.
Código HTML:
jQuery.Mobile y JQuery se importan en la página
La copia del código es la siguiente:
<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>
La copia del código es la siguiente:
<div id = "pageSlide">
<input type = "Hidden" value = "" id = "captcha"/>
<div id = "control deslizante">
<span id = "etiqueta"> </span>
<span id = "labletip"> diapositiva para confirmar que soy humano! </span>
</div>
</div>
Código JS:
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
var slider1 = new Slider ();
Slider1.init ();
/// activado cuando cambia el tamaño de la pantalla
$ (ventana) .resize (function () {
Slider1.handerin ();
Slider1.handout ();
});
}
// objeto de barra deslizante
Slider de funciones (SwipeStart, Min, Max, Index, ISOK, LableIndex) {
var _elf = this;
// Switch o no
_Self.swipEsTart = SwipEstart;
// valor mínimo
_self.min = min;
// valor máximo
_self.max = max;
// La posición actual del control deslizante
_Self.Index = index;
// Si la diapositiva tuvo éxito
_Self.ISOK = ISOK;
// El mouse está en la posición del botón de deslizamiento
_self.lableIndex = lableIndex;
}
// Inicialización
Slider.prototype.init = function () {
var _elf = this;
$ ("#etiqueta"). on ("mouseDown", función (evento) {
var e = evento || Window.event;
_self.lableIndex = e.clientx - this.OffSetLeft;
_Self.handerin ();
});
$ ("#pageSlide"). on ("mouseMove", función (evento) {
_self.handerMove (evento);
});
$ (documento) .on ("mouseup", function (evento) {
_self.handerout ();
});
$ ("#etiqueta"). on ("touchStart", function (evento) {
var e = evento || Window.event;
_self.lableIndex = e.originalevent.pagex - this.offsetleft;
_Self.handerin ();
});
$ ("#pageSlide"). on ("touchmove", function (evento) {
_self.handerMove (evento, "móvil");
});
$ (documento) .on ("touchend", function (evento) {
_self.handerout ();
});
}
// El mouse/dedo toca el botón deslizante
Slider.prototype.handerin = function () {
var _elf = this;
_self.swipeStart = true;
_self.min = 0;
_Self.max = $ ("#Slider"). Width ();
}
// mouse/dedo fuera
Slider.prototype.handout = function () {
var _elf = this;
//detener
_self.swipeStart = false;
_self.move ();
}
// movimiento del mouse/dedo
Slider.prototype.handerMove = function (event, type) {
var _elf = this;
if (_self.swipeStart) {
event.preventDefault ();
VAR Event = Event || Window.event;
if (type == "mobile") {
_Self.Index = Event.originaleVent.Pagex - _Self.lableIndex;
} demás {
_Self.Index = Event.clientx - _Self.lableIndex;
}
_self.move ();
}
}
// mouse/dedo fuera
Slider.prototype.move = function () {
var _elf = this;
$ (". Warn"). Text ("Index:" + _Self.Index + ", max" + _Self.max + ", lableIndex:" + _Self.lableIndex + ", valor:" + $ ("#captcha"). val () + "fecha:" + nueva fecha (). getUtcdate (););
if ((_self.index + 20)> = _self.max) {
_Self.Index = _Self.max - 20;
}
if (_self.index <0) {
_Self.Index = _Self.min;
}
$ (". Label"). CSS ("izquierda", _Self.index + "Px");
if (_Self.Index == (_elf.max - 20)) {
//detener
_self.swipeStart = false;
_self.isok = true; // desbloquear
$ ("#Captcha"). Val (1);
Var style = {"Filtro": "Alpha (Opacidad = 1)",
"-Moz-Opacidad": "1", "Opacidad": "1"}
$ (". UI-BTN.UI-Input-Btn.ui-Corner-all.ui-shadow"). CSS (estilo);
$ ("#Slider"). CSS ("Color de fondo", "#E5EE9f");
$ ("#labletip"). Text ("¡Gracias!");
} demás {
_self.isok = false; // desbloqueado
$ ("#Captcha"). Val (0);
Var style = {"Filtro": "Alpha (Opacidad = 0.2)",
"-Moz-Opacidad": "0.2", "Opacidad": "0.2"}
$ (". UI-BTN.UI-Input-Btn.ui-Corner-all.ui-shadow"). CSS (estilo);
$ ("#Slider"). CSS ("Color de fondo", "#FDEB9C");
$ ("#labletip"). Text ("¡Deslice para confirmar que soy humano!");
}
}
</script>
Los efectos se realizan: