50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
|
define(function (require, exports, module) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
var init = function () {
|
|||
|
|
$(document).on("load", "img.vc-touchclick", initEle).on("click", "img.vc-touchclick", touchClick);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var initEle = function () {
|
|||
|
|
var img = $(this);
|
|||
|
|
|
|||
|
|
img.removeData("poslist");
|
|||
|
|
img.data("poslist", []);
|
|||
|
|
|
|||
|
|
refreshSteps(img);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var touchClick = function(e) {
|
|||
|
|
var img = $(this);
|
|||
|
|
var pos = { x: e.x, y: e.y };
|
|||
|
|
var poslist = img.data("poslist");
|
|||
|
|
var strlist = img.data("strlist");
|
|||
|
|
|
|||
|
|
if (strlist.length <= poslist.length)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
poslist.push(pos);
|
|||
|
|
refreshSteps(img);
|
|||
|
|
|
|||
|
|
if (strlist.length <= poslist.length) {
|
|||
|
|
img.trigger("touchVcFinished");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var refreshSteps = function (dom) {
|
|||
|
|
var descTarget = $(dom.attr("data-target"));
|
|||
|
|
var strlist = dom.data("strlist");
|
|||
|
|
var poslist = dom.data("poslist");
|
|||
|
|
|
|||
|
|
var descArray = ["<span class='touch-click-hit'>请依次在图中点击</span>"];
|
|||
|
|
for (var i = 0; i < strlist.length; i++) {
|
|||
|
|
var clicked = poslist.length - 1 >= i;
|
|||
|
|
var currentClick = poslist.length == i;
|
|||
|
|
|
|||
|
|
//已点击绿色，待点击蓝色，未来点击黑色
|
|||
|
|
descArray.push("<span class='touch-click-" + (clicked ? "clicked" : currentClick ? "current" : "wait") + "'>" + strlist[i] + "</span>");
|
|||
|
|
}
|
|||
|
|
descTarget.html(descArray.join(""));
|
|||
|
|
}
|
|||
|
|
});
|