jQuery仿Android锁屏图案应用插件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery仿Android锁屏图案应用插件DEMO演示</title>
<link href="css/patternLock.css"  rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/patternLock.js"></script>
<style type="text/css">#warp{width:600px; margin:auto;}#warp div{margin-bottom:50px;}
</style>
</head>
<body>
<div id="warp"><h1>图案锁实例</h1><p>1、基础初始化</p><div id="patternContainer"></div><p>2、两点间到达目标点才画线</p><div id="patternContainer1"></div><p>3、当图案连线完成后才显示连线</p><div id="patternContainer2"></div><p>4、改变两个点之间的距</p><div id="patternContainer3"></div><p>5、自定义距阵</p><div id="patternContainer4"></div><p>6、使用映射</p><div id="patternContainer5"></div><p>7、作为验证码使用，这个在服务端需用到  patternCaptha,有兴趣的朋友可以研究下，这里就不多说了。</p><div id="patternContainer6"></div>
</div>
</body>
</html>
<script>$(function(){var lock = new PatternLock("#patternContainer");var lock1 = new PatternLock("#patternContainer1",{lineOnMove:false});var lock2 = new PatternLock("#patternContainer2",{patternVisible:false});var lock3 = new PatternLock("#patternContainer3",{radius:30,margin:20});var lock4 = new PatternLock("#patternContainer4",{matrix:[4,4]});var lock5 = new PatternLock("#patternContainer5",{mapper: function(idx){return (idx%9) + 1;}});})</script>

CSS

/*patternLock.js v 0.2.0Author: Sudhanshu YadavCopyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.Demo on: ignitersworld.com/lab/patternLock.html
*/.patt-holder{background:#3382c0;}
.patt-wrap{position:relative; cursor:pointer;}
.patt-wrap ul, .patt-wrap li{list-style: none;margin:0;padding: 0;
}
.patt-circ{position:relative;float: left;box-sizing: border-box;-moz-box-sizing: border-box;}
.patt-circ.hovered{border:3px solid #009900;
} .patt-error .patt-circ.hovered{border:3px solid #BA1B26;
}.patt-hidden .patt-circ.hovered{border:0;}.patt-dots{background: #FFF;width: 10px;height: 10px;border-radius:5px;position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-5px;
}
.patt-lines{border-radius:5px;height:10px;background:rgba(255,255,255,.7);position:absolute;transform-origin:5px 5px;-ms-transform-origin:5px 5px; /* IE 9 */-webkit-transform-origin:5px 5px;
}.patt-hidden .patt-lines{display:none;
}

/*patternLock.js v 0.2.0Author: Sudhanshu YadavCopyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.Demo on: ignitersworld.com/lab/patternLock.html
*/
(function ($, window, document, undefined) {"use strict";var isTouchSupported = !!('ontouchstart' in window),touchStart = isTouchSupported ? "touchstart" : "mousedown",touchEnd = isTouchSupported ? "touchend" : "mouseup",touchMove = isTouchSupported ? "touchmove" : "mousemove",nullFunc = function () {},objectHolder = {};//internal functionsfunction readyDom(iObj) {var holder = iObj.holder,option = iObj.option,matrix = option.matrix,margin = option.margin,radius = option.radius,html = ['<ul class="patt-wrap" style="padding:' + margin + 'px">'];for (var i = 0, ln = matrix[0] * matrix[1]; i < ln; i++) {html.push('<li class="patt-circ" style="margin:' + margin + 'px; width : ' + (radius * 2) + 'px; height : ' + (radius * 2) + 'px; -webkit-border-radius: ' + radius + 'px; -moz-border-radius: ' + radius + 'px; border-radius: ' + radius + 'px; "><div class="patt-dots"></div></li>');}html.push('</ul>');holder.html(html.join('')).css({'width': (matrix[1] * (radius * 2 + margin * 2) + margin * 2) + 'px','height': (matrix[0] * (radius * 2 + margin * 2) + margin * 2) + 'px'});//select pattern circleiObj.pattCircle = iObj.holder.find('.patt-circ');}//return height and angle for linesfunction getLengthAngle(x1, x2, y1, y2) {var xDiff = x2 - x1,yDiff = y2 - y1;return {length: Math.ceil(Math.sqrt(xDiff * xDiff + yDiff * yDiff)),angle: Math.round((Math.atan2(yDiff, xDiff) * 180) / Math.PI)};}var startHandler = function (e, obj) {e.preventDefault();var iObj = objectHolder[obj.token];//check if pattern is visible or notif (!iObj.option.patternVisible) {iObj.holder.addClass('patt-hidden');}//assign events$(this).on(touchMove + '.pattern-move', function (e) {moveHandler.call(this, e, obj);});$(document).one(touchEnd, function () {endHandler.call(this, e, obj);});//set pattern offsetvar wrap = iObj.holder.find('.patt-wrap'),offset = wrap.offset();iObj.wrapTop = offset.top;iObj.wrapLeft = offset.left;//reset pattern
            obj.reset();},moveHandler = function (e, obj) {e.preventDefault();var x = e.pageX || e.originalEvent.touches[0].pageX,y = e.pageY || e.originalEvent.touches[0].pageY,iObj = objectHolder[obj.token],li = iObj.pattCircle,patternAry = iObj.patternAry,lineOnMove = iObj.option.lineOnMove,posObj = iObj.getIdxFromPoint(x, y),idx = posObj.idx,pattId = iObj.mapperFunc(idx) || idx;if (patternAry.length > 0) {var laMove = getLengthAngle(iObj.lineX1, posObj.x, iObj.lineY1, posObj.y);iObj.line.css({'width': (laMove.length + 10) + 'px','transform': 'rotate(' + laMove.angle + 'deg)'});}if (idx) {if (patternAry.indexOf(pattId) == -1) {var elm = $(li[idx - 1]);elm.addClass('hovered');//push pattern on array
                    patternAry.push(pattId);//add start point for linevar margin = iObj.option.margin,radius = iObj.option.radius,newX = (posObj.i - 1) * (2 * margin + 2 * radius) + 2 * margin + radius,newY = (posObj.j - 1) * (2 * margin + 2 * radius) + 2 * margin + radius;if (patternAry.length != 1) {//to fix linevar lA = getLengthAngle(iObj.lineX1, newX, iObj.lineY1, newY);iObj.line.css({'width': (lA.length + 10) + 'px','transform': 'rotate(' + lA.angle + 'deg)'});if (!lineOnMove) iObj.line.show();}//to create new linevar line = $('<div class="patt-lines" style="top:' + (newY - 5) + 'px; left:' + (newX - 5) + 'px"></div>');iObj.line = line;iObj.lineX1 = newX;iObj.lineY1 = newY;//add on dom
                    iObj.holder.append(line);if (!lineOnMove) iObj.line.hide();}}},endHandler = function (e, obj) {e.preventDefault();var iObj = objectHolder[obj.token],pattern = iObj.patternAry.join('');//remove hidden pattern class and remove eventiObj.holder.off('.pattern-move').removeClass('patt-hidden');if (!pattern) return;iObj.option.onDraw(pattern);//to remove last line
            iObj.line.remove();if (iObj.rightPattern) {if (pattern == iObj.rightPattern) {iObj.onSuccess();} else {iObj.onError();obj.error();}}};function InternalMethods() {}InternalMethods.prototype = {constructor: InternalMethods,getIdxFromPoint: function (x, y) {var option = this.option,matrix = option.matrix,xi = x - this.wrapLeft,yi = y - this.wrapTop,idx = null,margin = option.margin,plotLn = option.radius * 2 + margin * 2,qsntX = Math.ceil(xi / plotLn),qsntY = Math.ceil(yi / plotLn),remX = xi % plotLn,remY = yi % plotLn;if (qsntX <= matrix[1] && qsntY <= matrix[0] && remX > margin * 2 && remY > margin * 2) {idx = (qsntY - 1) * matrix[1] + qsntX;}return {idx: idx,i: qsntX,j: qsntY,x: xi,y: yi};}};function PatternLock(selector, option) {var self = this,token = self.token = Math.random(),iObj = objectHolder[token] = new InternalMethods(),holder = iObj.holder = $(selector);//if holder is not present returnif (holder.length == 0) return;iObj.object = self;option = iObj.option = $.extend({}, PatternLock.defaults, option);readyDom(iObj);//add class on holderholder.addClass('patt-holder');//change offset property of holder if it does not have any propertyif (holder.css('position') == "static") holder.css('position', 'relative');//assign eventholder.on(touchStart, function (e) {startHandler.call(this, e, self);});//handeling callbackiObj.option.onDraw = option.onDraw || nullFunc;//adding a mapper function  var mapper = option.mapper;if (typeof mapper == "object") {iObj.mapperFunc = function (idx) {return mapper[idx];};} else if (typeof mapper == "function") {iObj.mapperFunc = mapper;} else {iObj.mapperFunc = nullFunc;}//to delete from option objectiObj.option.mapper = null;}PatternLock.prototype = {constructor: PatternLock,option: function (key, val) {var iObj = objectHolder[this.token],option = iObj.option;//for set methodsif (!val) {return option[key];}//for setterelse {option[key] = val;if (key == "margin" || key == "matrix" || key == "radius") {readyDom(iObj);}}},getPattern: function () {return objectHolder[this.token].patternAry.join('');},reset: function () {var iObj = objectHolder[this.token];//to remove linesiObj.pattCircle.removeClass('hovered');iObj.holder.find('.patt-lines').remove();//add/reset a array which capture patterniObj.patternAry = [];//remove error class if addediObj.holder.removeClass('patt-error');},error: function () {objectHolder[this.token].holder.addClass('patt-error');},checkForPattern: function (pattern, success, error) {var iObj = objectHolder[this.token];iObj.rightPattern = pattern;iObj.onSuccess = success || nullFunc;iObj.onError = error || nullFunc;}};PatternLock.defaults = {matrix: [3, 3],margin: 20,radius: 25,patternVisible: true,lineOnMove: true};window.PatternLock = PatternLock;
}(jQuery, window, document));

转载于:https://www.cnblogs.com/binmengxue/p/7235653.html

jQuery仿Android锁屏图案应用插件相关推荐

jQuery仿Android锁屏图案应用
jQuery仿Android锁屏图案应用在线演示本地下载 posted @ 2018-12-03 14:08 栖息地阅读(...) 评论(...) 编辑收藏
Android6.0风格图标,jQuery仿Android样式扁平风格图标插件
Flatify是一款可以制作安卓(Android)样式的Material-Design扁平风格图标的jQuery插件.它小巧实用,通过简单的设置,就可以制作出多种扁平风格的图标. 使用方法使用该扁平 ...
android 8 忘记图案,安卓手机忘记锁屏图案密码六种解决办法
安卓手机忘记锁屏图案密码六种解决办法,小编就来一一说明. 第一种方法:用别人的手机打你的电话, 然后手机就会进入系统,再进设置里去掉自动锁屏.当提示输入gmail密码的时候填写:"null& ...
android 炫酷图案解锁,超级漂亮的手机锁屏图案，炫酷到飞起，总有一款适合你...
原标题:超级漂亮的手机锁屏图案,炫酷到飞起,总有一款适合你九宫格手机解锁图案又称为手势密码,在手机屏幕上设置一笔连成的九宫格图案,在解锁时画一下设置的图案就能解锁,如今已经成为智能手机的标配,在支付 ...
Android 炫酷的手势动画,16个超级漂亮的手机锁屏图案，炫酷到飞起，总有一款适合你...
原标题:16个超级漂亮的手机锁屏图案,炫酷到飞起,总有一款适合你九宫格手机解锁图案又称为手势密码,在手机屏幕上设置一笔连成的九宫格图案,在解锁时画一下设置的图案就能解锁,如今已经成为智能手机的标配, ...
h5仿android 京东三级联动,jquery仿京东商城三级联动代码插件
2019-3-1更新:location.js文件里第三级县之前使用京东旧域名d.360buy.com的jsonp数据,域名做了跳转首页所以第三加载不出来.现在已经更新为d.jd.com,正常加载.不过 ...
android锁屏应用系统排行榜,重塑安卓手机的20大锁屏应用程序
1. AcDisplay 它是一个简单的设计android锁屏应用程序,以简约的方式处理通知.您可以直接从锁定屏幕访问应用程序.它具有使用传感器唤醒设备的活动模式. 兼容性 - Android 4.1 ...
Android 锁屏，息屏情况下打开界面Activity类似微信视频通话接电话时弹出接电话的界面
Android 锁屏,息屏情况下打开界面Activity,类似微信视频通话接电话时弹出接电话的界面 https://blog.csdn.net/yingtian648/article/details/ ...
Android锁屏机制原理分析
转载自:http://www.2cto.com/kf/201401/273898.html 春节前最后几天了,工作上几乎没有什么要做.大致整理下之前工作中写的文档,PPT,手册. 由于去年一年完全转到 ...

jQuery仿Android锁屏图案应用插件

jQuery仿Android锁屏图案应用插件相关推荐

最新文章

热门文章