Perceba o efeito:
O código do estilo CSS está ausente.
Código HTML:
jquery.mobile e jQuery são importados na página
A cópia do código é a seguinte:
<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>
A cópia do código é a seguinte:
<div id = "PagesLide">
<input type = "hidden" value = "" id = "captcha"/>
<div id = "slider">
<span id = "Label"> </span>
<span id = "labletip"> slide para confirmar que sou humano! </span>
</div>
</div>
Código JS:
A cópia do código é a seguinte:
<script type = "text/javascript">
window.onload = function () {
var slider1 = new slider ();
slider1.init ();
/// acionado quando o tamanho da tela muda
$ (janela) .Resize (function () {
slider1.handerin ();
slider1.handerout ();
});
}
// Objeto de barra deslizante
Slider de função (SwipeStart, Min, Max, Index, Isok, LableIndex) {
var _elf = this;
// Switch ou não
_self.swipeStart = swipeStart;
// valor mínimo
_self.min = min;
// valor máximo
_self.max = max;
// a posição atual do controle deslizante
_self.index = index;
// se o slide foi bem -sucedido
_elf.ISOK = ISOK;
// o mouse está na posição do botão de slide
_self.LableIndex = LableIndex;
}
// inicialização
Slider.prototype.init = function () {
var _elf = this;
$ ("#Label").
var e = evento || Window.Event;
_self.LableIndex = e.clientX - this.offsetLeft;
_self.handerin ();
});
$ ("#Pageslide").
_self.Handermove (Evento);
});
$ (documento) .on ("mouseup", function (event) {
_self.handerout ();
});
$ ("#Label").
var e = evento || Window.Event;
_self.LableIndex = e.originalevent.pagex - this.offsetleft;
_self.handerin ();
});
$ ("#paagaslide").
_elf.Handermove (Evento, "Mobile");
});
$ (document) .on ("thequend", function (evento) {
_self.handerout ();
});
}
// mouse/dedo toque o botão deslizante
Slider.prototype.handerin = function () {
var _elf = this;
_self.swipeStart = true;
_self.min = 0;
_self.max = $ ("#slider"). width ();
}
// mouse/dedo fora
Slider.prototype.handerout = function () {
var _elf = this;
//parar
_self.swipeStart = false;
_self.move ();
}
// Mova de mouse/dedão
Slider.prototype.handermove = function (evento, tipo) {
var _elf = this;
if (_self.swipeStart) {
event.preventDefault ();
Var Evento = Evento || Window.Event;
if (tipo == "celular") {
_self.index = event.originalevent.pagex - _self.lableIndex;
} outro {
_self.index = event.clientx - _self.lableIndex;
}
_self.move ();
}
}
// mouse/dedo fora
Slider.prototype.move = function () {
var _elf = this;
$ (".
if ((_self.index + 20)> = _self.max) {
_self.index = _self.max - 20;
}
if (_self.index <0) {
_self.index = _self.min;
}
$ (". Label"). CSS ("esquerda", _self.index + "px");
if (_self.index == (_self.max - 20)) {
//parar
_self.swipeStart = false;
_self.isok = true; // desbloquear
$ ("#captcha"). Val (1);
var estilo = {"filtro": "alfa (opacidade = 1)",
"-moz-opacity": "1", "Opacity": "1"}
$ (". ui-btn.ui-input-btn.ui-dorner-all.ui-shadow"). css (estilo);
$ ("#slider"). CSS ("colorido de fundo", "#e5ee9f");
$ ("#labletip"). Texto ("Obrigado!");
} outro {
_self.isok = false; // Desbloqueado
$ ("#CAPTCHA"). Val (0);
var estilo = {"filtro": "alfa (opacidade = 0,2)",
"-moz-opacity": "0.2", "opacidade": "0,2"}
$ (". ui-btn.ui-input-btn.ui-dorner-all.ui-shadow"). css (estilo);
$ ("#slider"). CSS ("colorido de fundo", "#fdeb9c");
$ ("#labletip"). Texto ("Slide para confirmar que sou humano!");
}
}
</script>
Os efeitos são realizados: