只做了pc端 没有做手机端touch事件的兼容 有兴趣的朋友可以改改
<div class="main">
<div class="gesture">
<ul>
</ul>
<div id="pan">
</div>
</div>
</div>
<div class="footer">
<button οnclick="set_tu()">
保存图案</button>
<button οnclick="get_tu()">
开始画图</button>
</div>
<style>
body
{
margin: 0;
padding: 0;
}
.main
{
float: left;
width: 100%;
}
.footer
{
float: left;
margin-left: 50px;
}
.gesture
{
width: 216px;
float: left;
margin: 50px;
position: relative;
}
.gesture #pan
{
position: relative;
}
.gesture #pan span
{
width: 23px;
height: 2px;
position: absolute;
left: 50px;
background: black;
top: 24px;
}
.gesture #pan span.h
{
width: 20px;
}
.gesture #pan span.x
{
top: 62px;
transform: rotate(45deg);
width: 51px;
}
.gesture #pan span.s
{
width: 22px;
transform: rotate(90deg);
}
.gesture #pan span.xia
{
transform: rotate(-45deg);
}
ul
{
list-style: none;
width: 100%;
float: left;
padding: 0;
margin: 0;
}
ul li
{
width: 50px;
height: 50px;
border: 1px solid green;
border-radius: 30px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
body
{
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none; /* 以下两个属性目前并未支持,写在这里为了减少风险 */
-o-user-select: none;
user-select: none;
}
</style>
<script>
//曲线
var pan = document.querySelector("#pan");
//图案
var ul = document.querySelector("ul");
for (var i = 0; i < 9; i++) {
var li = document.createElement("li");
li.id = i;
ul.appendChild(li);
li.onmousedown = mouse_down;
//鼠标在图案上移动
li.onmousemove = mouse_move;
li.onmouseup = mouse_up;
}
//参数
var tu_arr = []; //图案集合保存记录
var hua_arr = []; //图案集合画图记录
var mouse_isdown; //鼠标是否按下
var mouse_type = false; //画图还是记录 true 画图 false 记录
var mouse_down_dom; //画的最后一个图标
//鼠标按下
function mouse_down() {
if (!mouse_type) {
tu_arr = [];
clear_tu();
}
var left = this.offsetLeft
var top = this.offsetTop
mouse_isdown = true;
mouse_down_dom = this;
}
//鼠标移动
function mouse_move(ev) {
if (mouse_isdown) {
this.style.background = "green";
if (!mouse_type && tu_arr.indexOf(this.id) < 0) {
tu_arr.push(this.id);
}
else if (hua_arr.indexOf(this.id) < 0)
hua_arr.push(this.id);
var jian_id = Math.abs(this.id - mouse_down_dom.id);
if (jian_id > 0) {
var left;
var top;
var jian_id_result = this.id - mouse_down_dom.id;
var span = document.createElement("span");
switch (jian_id) {
case 1:
span.className = "h";
if (jian_id_result == 1) {
left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth;
top = mouse_down_dom.offsetTop + mouse_down_dom.offsetHeight / 2;
} else {
left = this.offsetLeft + this.offsetWidth;
top = this.offsetTop + this.offsetHeight / 2;
}
break;
case 3:
span.className = "s";
if (jian_id_result == 3) {
left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth / 2 - 12;
top = mouse_down_dom.offsetTop + mouse_down_dom.offsetHeight + 8;
} else {
left = this.offsetLeft + this.offsetWidth / 2 - 12;
top = this.offsetTop + this.offsetHeight + 8;
}
break;
case 4:
span.className = "x";
if (jian_id_result == 4) {
left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth - 14;
top = mouse_down_dom.offsetTop + mouse_down_dom.offsetHeight + 8;
} else {
left = this.offsetLeft + this.offsetWidth - 14;
top = this.offsetTop + this.offsetHeight + 8;
}
break;
case 2:
span.className = "x xia";
if (jian_id_result == 2) {
left = this.offsetLeft + this.offsetWidth / 2 + 9;
top = this.offsetTop - 12;
} else {
left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth / 2 + 9;
top = mouse_down_dom.offsetTop - 12;
}
break;
}
span.style.left = left;
span.style.top = top;
pan.appendChild(span);
}
mouse_down_dom = this;
}
}
//鼠标抬起
ul.onmouseup = mouse_up;
function mouse_up(e) {
var e = e || window.event;
if (e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
//开始比较图案
if (mouse_type) {
var result = tu_arr.join(",") == hua_arr.join(",");
if (!result) {
alert("解锁失败");
} else
alert("解锁成功");
hua_arr = [];
clear_tu();
}
mouse_isdown = false;
}
//保存图案
function set_tu() {
hua_arr = [];
clear_tu();
}
//画图
function get_tu() {
mouse_type = true;
}
//清空当前所画图案
function clear_tu() {
pan.innerHTML = "";
var li_list = ul.querySelectorAll("li");
for (var i = 0; i < li_list.length; i++) {
li_list[i].style = "";
}
}
</script>
如有疑问联系QQ:2388908676