JavaScript|拖拽|仿Android手机九点连线开锁-CSDN博客

最简单的JavaScript拖动代码

<script>
var xx=0,yy=0;
function a(v)
{
xx=event.x-v.offsetLeft;
yy=event.y-v.offsetTop;
}
function b(v)
{
v.style.left=event.x-xx;
v.style.top=event.y-yy;
}
</script>
<img id="img" src="http://www.ijavascript.cn/templates/logo/logo.gif" style="position:absolute;" ondragstart="a(this);" ondrag="b(this);" >

上面这段代码转自www.ijavascript.cn

下面是做的一个仿Android手机九点连线开锁，但是是简易版，没有连线，没有连线顺序。

 1 <html>
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5     table{
 6         -moz-user-select:none;
 7          hutia:expression(this.onselectstart=function(){return(false)});
 8     }
 9     table tr td{
10         height=100px;
11         width=100px;
12         text-align=center;
13         border: 1px solid #999;
14         background-color: #DDD;
15     }
16     </style>
17 </head>
18 <body>
19 <script>
20 var xx=0,yy=0;//鼠标距离table左上端的距离。
21 var pwd=0;//通过位运算计算那些点被激活。
22 function a(obj){
23     if (event.button==1) //检查鼠标左键是否处于按下状态
24     {
25         xx=event.x-obj.offsetLeft;
26         yy=event.y-obj.offsetTop;
27         if (xx>=20&&xx<=80&&yy>=20&&yy<=80) {
28             obj.rows[0].cells[0].style.background='#99D';//修改背景颜色
29             pwd=pwd|256;//位运算，激活第一行第一列的点。
30         }
31         if(xx>=120&&xx<=180&&yy>=20&&yy<=80){
32             obj.rows[0].cells[1].style.background='#99D';//同上
33             pwd=pwd|128;//同上
34         }
35         if(xx>=220&&xx<=280&&yy>=20&&yy<=80){
36             obj.rows[0].cells[2].style.background='#99D';
37             pwd=pwd|64;
38         }
39         if(xx>=20&&xx<=80&&yy>=120&&yy<=180){
40             obj.rows[1].cells[0].style.background='#99D';
41             pwd=pwd|32;
42         }
43         if(xx>=120&&xx<=180&&yy>=120&&yy<=180){
44             obj.rows[1].cells[1].style.background='#99D';
45             pwd=pwd|16;
46         }
47         if(xx>=220&&xx<=280&&yy>=120&&yy<=180){
48             obj.rows[1].cells[2].style.background='#99D';
49             pwd=pwd|8;
50         }
51         if(xx>=20&&xx<=80&&yy>=220&&yy<=280){
52             obj.rows[2].cells[0].style.background='#99D';
53             pwd=pwd|4;
54         }
55         if(xx>=120&&xx<=180&&yy>=220&&yy<=280){
56             obj.rows[2].cells[1].style.background='#99D';
57             pwd=pwd|2;
58         }
59         if(xx>=220&&xx<=280&&yy>=220&&yy<=280){
60             obj.rows[2].cells[2].style.background='#99D';
61             pwd=pwd|1;
62         }
63     }
64     
65 }
66 function b(obj){
67     for (var i = 0; i < 3; i++) {
68         for (var j = 0; j < 3; j++) {
69             //重置单元格背景颜色
70             obj.rows[i].cells[j].style.background='#DDD';
71         }
72     }
73     if (pwd.toString()=='471')//如果某几个点被激活（471的情况‘Z’字形），则判断输出ok
74      {
75         document.write("OK!");
76     }
77     pwd=0;//重置为未被激活的状态
78 }
79 </script>
80 <table onmousemove="javascript:a(this);" onmouseup="javascript:b(this);">
81     <tr>
82         <td>~</td>
83         <td>~</td>
84         <td>~</td>
85     </tr>
86     <tr>
87         <td>~</td>
88         <td>~</td>
89         <td>~</td>
90     </tr>
91     <tr>
92         <td>~</td>
93         <td>~</td>
94         <td>~</td>
95     </tr>
96 </table>
97 </body>
98 </html>