html滑动解锁,js实现滑动解锁效能(PC+Moblie)

html滑动解锁,js实现滑动解锁效能(PC+Moblie)js实现滑动解锁功能(PC+Moblie)实现效果:css样式代码略。html代码:页面上导入了jquery.mobile、jquerySlidetoconfirmIamhuman!js代码:window.onload=function(){varslider1=newSlider();slider1.Init();///屏幕大小发生改变时触发$(window).res…

大家好,又见面了,我是你们的朋友全栈君。

js实现滑动解锁功能(PC+Moblie)

实现效果:

152628103.png

css样式代码略。

html代码:

页面上导入了jquery.mobile 、jquery

Slide to confirm I am human!

js代码:

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 = this;

//是否开始滑动

_self.swipestart = swipestart;

//最小值

_self.min = min;

//最大值

_self.max = max;

//当前滑动条所处的位置

_self.index = index;

//是否滑动成功

_self.IsOk = IsOk;

//鼠标在滑动按钮的位置

_self.lableIndex = lableIndex;

}

//初始化

Slider.prototype.Init = function () {

var _self = this;

$(“#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(event);

});

$(document).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”);

});

$(document).on(“touchend”, function (event) {

_self.HanderOut();

});

}

//鼠标/手指接触滑动按钮

Slider.prototype.HanderIn = function () {

var _self = this;

_self.swipestart = true;

_self.min = 0;

_self.max = $(“#slider”).width();

}

//鼠标/手指移出

Slider.prototype.HanderOut = function () {

var _self = this;

//停止

_self.swipestart = false;

_self.Move();

}

//鼠标/手指移动

Slider.prototype.HanderMove = function (event, type) {

var _self = this;

if (_self.swipestart) {

event.preventDefault();

var event = event || window.event;

if (type == “mobile”) {

_self.index = event.originalEvent.pageX – _self.lableIndex;

} else {

_self.index = event.clientX – _self.lableIndex;

}

_self.Move();

}

}

//鼠标/手指移出

Slider.prototype.Move = function () {

var _self = this;

$(“.warn”).text(“index:” + _self.index + “, max” + _self.max + “,lableIndex:” + _self.lableIndex + “,value:” + $(“#captcha”).val() + ” date:” + new Date().getUTCDate());

if ((_self.index + 20) >= _self.max) {

_self.index = _self.max – 20;

}

if (_self.index < 0) {

_self.index = _self.min;

}

$(“.label”).css(“left”, _self.index + “px”);

if (_self.index == (_self.max – 20)) {

//停止

_self.swipestart = false;

_self.IsOk = true;//解锁

$(“#captcha”).val(1);

var style = {“filter”: “alpha(opacity=1)”,

“-moz-opacity”: “1”, “opacity”: “1”}

$(“.ui-btn.ui-input-btn.ui-corner-all.ui-shadow”).css(style);

$(“#slider”).css(“background-color”, “#E5EE9F”);

$(“#lableTip”).text(“Thank You!”);

} else {

_self.IsOk = false;//未解锁

$(“#captcha”).val(0);

var style = { “filter”: “alpha(opacity=0.2)”,

“-moz-opacity”: “0.2”, “opacity”: “0.2”}

$(“.ui-btn.ui-input-btn.ui-corner-all.ui-shadow”).css(style);

$(“#slider”).css(“background-color”, “#FDEB9C”);

$(“#lableTip”).text(“Slide to confirm I am human!”);

}

}

效果实现:

152628104.jpg

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150570.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号