代码片段
当用户拖动滑块时，根据设置的float值来向上/下显示拼图区域。
/* 触发式 */
if(kgConfig["type"] === 2){
/* 点击区域外隐藏伸缩框 */
document.addEventListener("mousedown", function(e){
var str = e.target.childNodes;
if(e.target.id){
outside = e.target.id !== "KgBasemap";
} else {
var outside = true; /* 是否为外部点击 */
for (var i = 0; i < str.length; i ) {
if (str[i].id === "KgBasemap") {
outside = false;
}
}
if (str.length === 0){
outside = false;
}
}
if (outside) {
/* 隐藏拼图区域 */
kg.show(kg.$(param["bind"] " #KgBasemap"), 0);
}
});
}
/* 点击开始拖动时触发函数 */
function eventDown(e){
....
/* 触发式(向上/下)显示拼图区域 */
if(kgConfig["type"] === 2){
if (param["float"] === "down"){
kg.$(param["bind"] " #KgBasemap").className = "KgBasemapDown";
}
kg.show(kg.$(param["bind"] " #KgBasemap"), 1);
}
....
}弹窗式
弹窗式的显示，弹出式显示是绑定自有验证按钮效果，与自有业务样式完美融合。
而且会根据情况来是否需要验证弹窗，体验相对来说会更加友好，适用场景也更广泛。
代码片段
当验证行式为弹窗式时，按钮点击弹窗出现。当用户点击绑定的按钮，创建对应验证码弹窗并绑定弹出/关闭弹窗事件。
/* 弹出式拼图 */
if(kgConfig["type"] === 3){
var popupButton = kg.default(param["button"], "#captchaButton"); /* 弹出式按钮 id */
param["bind"] = kg.popupAddId; /* 创建新弹窗 ID */
/* 刷新时，删除上次创建的弹出窗口DIV，重新创建 */
if(kg.$(param["bind"])){kg.$(param["bind"]).parentNode.removeChild(kg.$(param["bind"]));}
/* 在Button前创建一个DIV并输出弹窗模板 */
var add_div = document.createElement("div");
add_div.id = kg.popupAddId.substring(1); /* 去除 # */
add_div.innerHTML = kgConfig["styleTpl"];
/* 创建弹窗 */
/* 1、body 开始创建 */
kg.$("body").insertBefore(add_div, kg.$("body").childNodes[0]);
/* 2、当前按钮前创建
kg.$(popupButton).parentNode.insertBefore(add_div, kg.$(popupButton)); */
/* 弹出事件绑定 */
kg.$(popupButton).onclick = function(e){
popup(1);
}
/* 关闭按钮事件绑定 */
kg.$(param["bind"] " #KgPuzzleTitle ol:nth-child(2) img").onclick = function(e){
popup(0);
}
kg.$(param["bind"] " #KgPuzzleBody").onclick = function(e){
popup(0);
}
}
/* 弹出式窗口显示/隐藏 type=3 时有效 */
/* show: 0隐藏、1显示 */
var popup = function (show) {
if(kgConfig["type"] === 3) {
kg.show(kg.$(kg.popupAddId), show);
if(show === 1){
kg.$(kg.popupAddId).style.animation = "ai-goin 0.8s forwards ease";
}
if(kg.ie < 10){
kg.show(kg.$(kg.popupAddId), show);
}
}
}相关链接
官方地址：
在线体验：
开发文档：
