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)


相关推荐

  • 图像形态学操作—腐蚀扩展深度

    图像形态学操作—腐蚀扩展深度

  • 四轴平面机器人的手眼标定

    四轴平面机器人的手眼标定四轴平面机器人的手眼标定介绍在实际的机器人应用中,通常会给机器人配备视觉传感器,视觉传感器用于感知周围环境。但是,通过视觉传感器获取的场景坐标是基于视觉坐标系下的,机器人并不能直接使用,要获取机器人可以直接使用的坐标信息,必须将坐标转换到机器人坐标系下。因此,机器人手眼标定的目的是为了获取从视觉坐标系转换到机器人坐标系的转换矩阵。机器人手眼标定问题可以分为两类:1)eye-in-hand,…

  • Rancher部署报错状态一直restarting

    Rancher部署报错状态一直restarting

  • map的containsKey方法

    map的containsKey方法map是一个key和value的键值对集合。map中的containKey(key)方法是判断该key在map中是否有key存在。如果存在则返回true,反之,返回false。程序实例:判断数组中是否有1,有的话就返回1和1所在的位置。我采用的是hashmap,在哈希表中进行添加,删除,查找等操作,性能十分之高,不考虑哈希冲突的情况下,仅需一次定位即可完成,时间复杂度为O(1),时间消耗是很少的。packageTT04;importjava.util.Has…

  • 云计算和虚拟化技术的关系_云计算技术与应用

    云计算和虚拟化技术的关系_云计算技术与应用#写于2021.04.10#本文为学习笔记,用的ppt是陈羽中教授版,侵删#笔记只为交流,入门小白,有错望留言纠正#总结不易望赞鼓励1.大数据和云计算1.1大数据现象是怎么形成的?形成人用的多了产生数据设备多了大数据时代导致数据有以下特点:1.2云计算有哪些特点?超大规模虚拟化高可靠性通用性高可伸缩性按需服务极其廉价1.3云计算你找服务类型可分为哪几类?1.4云计算技术体系结构可分为哪几层?资源池和管理中间件层为云计算技术的

    2022年10月27日
  • java交换二维数组行列_java二维数组行列

    java交换二维数组行列_java二维数组行列培训系列AmberXie求二维数组行列之和把二维数组a各行之和分别放入b…二维数组例题答案[技巧]【例1】编写程序,利用二维数组在窗体上输出如图5×5…如果没有max为行列都是最大值flag=0Forj=1To5Ifa(j……二维数组行列数的检测也是通过属性length进行的,不同的是测列数时需要给定一…程序中定义了二维数组arr,a…

发表回复

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

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