JavaScript|拖拽|仿Android手机九点连线开锁

最简单的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>

转载于:https://www.cnblogs.com/yexinwei/archive/2013/01/18/2865697.html

JavaScript|拖拽|仿Android手机九点连线开锁相关推荐

Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
功能强大的JavaScript 拖拽库 SortableJS
功能强大的JavaScript 拖拽库 SortableJS 官网:http://www.sortablejs.com/ 示例: 配置项: var sortable = new Sortable(el ...
简易而又灵活的Javascript拖拽框架（五）
====================================================== 注:本文源代码点此下载 ================================= ...
JavaScript 通过plus读取android手机短信内容
JavaScript 通过plus读取android手机短信内容. 1.获取android权限在HBuilder工程中双击应用的"manifest.json"文件,切换到&quo ...
JavaScript 拖拽功能
JavaScript 拖拽功能 - Web前端工程师面试题讲解拖动图片 <img draggable="true"> 一开始 html 页面 <style> ...
源码推荐：collectionView拖拽,仿凤凰FM iOS 局部监听键盘再也不会挡住输入框
UICollectionView拖拽移动单元以及本地保存(上传者:dengqi) UICollectionView拖拽移动单元以及本地保存,可以保存你上次移动的位置. 仿映客直播导航条(上传者:Coo ...
Android表格拖拽排序,Android 拖拽排序控件 DragGridView
Android 拖拽排序控件 DragGridView Android 开发中,我们经常会遇到条目拖拽排序的需求,特别是在新闻类应用中就更普遍了.其实,我们在网上可以搜到许多关于拖拽排序的自定义控件, ...
android 拖拽gridview,Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换
具体的原理描述,可以去看夏神的这个博文效果图: 这里,采用了gridview的onLongItemClickListener,来拿到长按的view,用于拖动解决了,原来实现中可能遇到的item消失 ...
android 拖拽布局,Android拖拽、回弹布局
这一次拆解的是今日头条的关注页面:点击关注的头像会弹出一个文章列表.在边界拖拽会出现关闭提示.这次同时实现了Android端和IOS端的效果. 先讲解Android端的实现吧,毕竟我是个Android ...

JavaScript|拖拽|仿Android手机九点连线开锁

JavaScript|拖拽|仿Android手机九点连线开锁相关推荐

最新文章

热门文章