首先非常感谢网友JBP的无私分享，此作品是他刚从其它网站上整理出来的一个效果非常棒的js特效，是用原创JavaScript实现了，没有用jquery框架，属于JavaScript的高级编程方面的技术，主要是用JavaScript绘制水平线、垂直线和斜线，把焦点的数值存在一个数组里面，保存成一组数作为密码口令，最终效果玩Android手机的网友都非常熟悉，仿屏幕开锁效果，作品里面的每个功能都把注释写得非常清楚，非常适合网友学习，好好收藏哇。。。
初始化代码如下：
/* 初始化节点矩阵区域 */
function initBtn(){
var xPadding = containerPaddingX - (btnPointW / 2); //节点水平方向的偏移量
var yPadding = containerPaddingY - (btnPointH / 2); //节点垂直方向的偏移量
var idTmp, xInd = 0, yInd = 0, xAt = 0, yAt = 0; //临时变量：节点ID、节点水平索引、垂直索引、水平位置（像素值）、垂直位置
for(var i=0,len=btnValue.length;i<len;i++){
idTmp = "btnPoint_" + i; //生产节点ID
xInd = i % 4; //计算水平索引
yInd = parseInt(i/4); //计算垂直索引
xAt = xPadding + xInd * gridW; //计算水平位置（像素值）
yAt = yPadding + yInd * gridH; //计算垂直位置（像素值）
var btnTmp = document.createElement("DIV"); //创建新DIV
btnTmp.value = btnValue[i]; //节点密码值
btnTmp.x = xAt;
btnTmp.y = yAt;
btnTmp.id = idTmp;
btnTmp.className = "btnPoint"; //节点默认状态
btnTmp.style.width = btnPointW + "px";
btnTmp.style.height = btnPointH + "px";
btnTmp.style.left = xAt + "px";
btnTmp.style.top = yAt + "px";
btnTmp.onclick = function(){ chkBtn(this.id) } //点击节点时，事件绑定
btnTmp.onmouseover = function(){ overBtn(this.id) } //鼠标悬停节点时，事件绑定
btnTmp.onmouseout = function(){ outBtn(this.id) } //鼠标离开节点时，事件绑定
$("btnSprite").appendChild(btnTmp); //将该节点DOM放入容器
}
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友JBP Android 绘制图形 实用特效 拖拽