js实现滑动解锁功能(PC+Moblie)
http://dummyimage.com/600x400/
http://placehold.it/140x70
实现效果:
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="slider" class="slider">
<span id="label" class="label"></span>
<span id="lableTip">Slide to confirm I am human!</span>
</div>
</div>
js代码:
/**
* Created by Administrator on 15-1-9.
*/
//滑动条对象
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 () {
document.getElementById("btnSubmit").disabled = true;
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) {
try {
var e = event || window.event;
//event.originalEvent.changedTouches[0].clientX //event.originalEvent.pageX
_self.lableIndex = event.originalEvent.changedTouches[0].clientX - this.offsetLeft;
_self.HanderIn();
} catch (e) {
console.log(navigator.appVersion + "不支持TouchEvent事件!" + e.message);
}
}); $("#pageSlide").on("touchmove", function (event) {
try {
_self.HanderMove(event, "mobile");
} catch (e) {
console.log(navigator.appVersion + "不支持touchmove事件!" + e.message);
} }); $(document).on("touchend", function (event) {
try {
_self.HanderOut();
} catch (e) {
console.log(navigator.appVersion + "不支持touchend事件!" + e.message);
} });
} //鼠标/手指接触滑动按钮
Slider.prototype.HanderIn = function () {
var _self = this;
_self.swipestart = true;
_self.min = 0;
_self.max = $("#slider").width();
if(_self.lableIndex<0){_self.lableIndex=0;}
} //鼠标/手指移出
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") {
//event.originalEvent.changedTouches[0].clientX //event.originalEvent.pageX
_self.index = event.originalEvent.changedTouches[0].clientX - _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());
//$(".warn").text("max:"+ _self.max +",index:"+_self.index +",lableIndex:"+_self.lableIndex);
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!");
document.getElementById("btnSubmit").disabled = false;
document.getElementById("btnSubmit").parentNode.classList.remove("ui-state-disabled");
} 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!");
document.getElementById("btnSubmit").disabled = true; document.getElementById("btnSubmit").parentNode.classList.add("ui-state-disabled"); }
}
效果实现:
js实现滑动解锁功能(PC+Moblie)的更多相关文章
- 原生JS实现滑动验证功能
一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...
- js写的滑动解锁
css部分 *{ margin:; padding:; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select ...
- hihocoder#1054 : 滑动解锁(深度优先搜索)
描述 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上 ...
- Swift: 打造滑动解锁文字动画
原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...
- C语言 · 滑动解锁
题目:滑动解锁 滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图 ...
- jq实现简单的滑动解锁效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- java实现滑动解锁
滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上都一致 ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- 使用QJM部署HDFS HA集群
一.所需软件 1. JDK版本 下载地址:http://www.oracle.com/technetwork/java/javase/index.html 版本: jdk-7u79-linux-x64 ...
- typedef用法小结
typedef用法小结- - 注意:本文转自网络,版权归原作者所有. typedef typedef用法小结- - 这两天在看程序的时候,发现很多地方都用到typedef,在结构体定义,还有一些数组等 ...
- flexpaper 背景色变化
1.mxml文件头部:添加 backgroundAlpha="0" <s:Application xmlns:fx="http://ns.adobe.com/mxm ...
- oracle sysdba用户远程登录
sysdba远程登录需要两个条件: 1.remote_login_passwordfile =exclusive时,启用口令文件,允许远程登录: 查看remote_login_passwordfile ...
- thinkphp 重定向redirect
/** * URL重定向 * @param string $url 重定向的URL地址 * @param integer $time 重定向的等待时间(秒) * @param string $msg ...
- bzoj3675: [Apio2014]序列分割
留坑 为什么别人家的斜率优化跟我一点都不一样! 为什么斜率都要变成正的... 为什么要那么推式子 为什么不能直接做啊..... 为什么不把0去掉去秒WA啊 为什么叉积去了0也过不了啊 woc啊 #in ...
- Nginx系列~负载均衡服务器与WWW服务器的实现
上两讲主要是关于Nginx的环境的介绍,没有涉及到真正环境的开发,这次我们以一个实现的例子,来说明一下负载均衡服务器与WWW服务器的Nginx是如何配置的,并最终如何实现的. 如下是一个实际场景,一台 ...
- 【JAVA - 基础】之反射的原理与应用
一.反射简介 反射机制指的是程序在运行时能够获取自身的信息.在JAVA中,只要给定类的名字,那么就可以通过反射机制来获取类的所有信息. 1.反射的应用 JDBC编程中的:Class.forName(& ...
- Unity3d UnityEditor EditorWindow 自定义窗体控件
功能:是因为公司的模型组需要一个插件,在MAYA中有很多个复制物体,导出的时候只导出一个,其他相同的物体只导出点的位置信息.这样进入Unity里就是一个物体和N个相同物体的位置点,代码简单但是需要用插 ...
- sql server 获取每一个类别中值最大的一条数据
/* 数据如下: name val memo a 2 a2(a的第二个值) a 1 a1--a的第一个值 a 3 a3:a的第三个值 b 1 b1--b的第一个值 b 3 b3:b的第三个值 b 2 ...