YY滑动验证码完整图分析

Invisible

  开学了。在论坛也没多大贡献。。就发这个吧。


- - 我就来发发我理解到的。。 这段代码是实现显示完整图的核心代码。。
   f = function(d, f) {
        d是一张没有经过处理的完整图片。 F是一张没有经过处理的 而且缺了一块的图片。
        var k = c(), ’ C可以在这个函数上面找到。。无非就是返回52长度的数组。。固定的。。
        l = document.createElement("div");  ‘就是新建一个DIV图层  
        l.className = "gt_ads_fullbg_slice", ‘就是更改DIV图层的名称   
        l.style.backgroundImage = "url(" + d + ")";‘就是更改DIV图层的背景图片为上方未经处理的完整图。
        var m = document.createElement("div");‘就是新建一个DIV图层  
        m.className = "gt_ads_cut_slice", ‘就是更改DIV图层的名称
        m.style.backgroundImage = "url(" + f + ")";‘就是更改DIV图层的背景图片为上方未经处理的完整图。
‘上面的。。 其实也没多大用处  下面才是重点  看懂了  你自然就能有思路去搞了。。


FOR  循环语句。 K 上面  说了。。一个52长度的数组。。  所以循环52次。
p = "-" + (k[q] % 26 * 12 + 1) + "px " + (k[q] > 25 ? -i.height / 2 : 0) + "px"   这个就是拼图右偏移和 下偏移的值。。但是前面有个减号。就成了向左偏移。向上偏移。  至于里面的值  你就得自己算了。。   -I是图片的高度
举个例子 p = -157px 58px  那么拼图的位置就向左边移动157 向上移动58 然后第一张图片的出现在左上角的地方。  然后一直循环  每次都是不相同的坐标 。之后就能显示一张完整的拼图了。。。
基本到这里。。下面就不用说了。。。     至于你怎么合并 怎么分割就是你的事了。。
        for (var n, o, p, q = 0,
        r = k.length; r > q; q++) p = "-" + (k[q] % 26 * 12 + 1) + "px " + (k[q] > 25 ? -i.height / 2 : 0) + "px",
        n = l.cloneNode(),
        n.style.backgroundPosition = p,
        a.push(n),
        h.appendChild(n),
        o = m.cloneNode(),
        o.style.backgroundPosition = p,
        b.push(o),
        j.appendChild(o);
        e()
    }
到这了。。源码就不发了。。。

boot88

看不懂·只知道这是JS代码

1352688

感谢大神分享

晓天信

唉 看不懂·只知道这是JS代码

993651481

ApOL 发表于 2015-2-27 14:59
还原图片的源码

能否在完整点。把拖动的也给发过来行吗？

ApOL

还原图片的源码{:soso_e103:}

温柔gg

  开学了。在论坛也没多大贡献。。就发这个吧。


- - 我就来发发我理解到的。。 这段代码是实现显示完整图的核心代码。。
   f = function(d, f) {
        d是一张没有经过处理的完整图片。 F是一张没有经过处理的 而且缺了一块的图片。
        var k = c(), ’ C可以在这个函数上面找到。。无非就是返回52长度的数组。。固定的。。
        l = document.createElement("div");  ‘就是新建一个DIV图层  
        l.className = "gt_ads_fullbg_slice", ‘就是更改DIV图层的名称   
        l.style.backgroundImage = "url(" + d + ")";‘就是更改DIV图层的背景图片为上方未经处理的完整图。
        var m = document.createElement("div");‘就是新建一个DIV图层  
        m.className = "gt_ads_cut_slice", ‘就是更改DIV图层的名称
        m.style.backgroundImage = "url(" + f + ")";‘就是更改DIV图层的背景图片为上方未经处理的完整图。
‘上面的。。 其实也没多大用处  下面才是重点  看懂了  你自然就能有思路去搞了。。


FOR  循环语句。 K 上面  说了。。一个52长度的数组。。  所以循环52次。
p = "-" + (k[q] % 26 * 12 + 1) + "px " + (k[q] > 25 ? -i.height / 2 : 0) + "px"   这个就是拼图右偏移和 下偏移的值。。但是前面有个减号。就成了向左偏移。向上偏移。  至于里面的值  你就得自己算了。。   -I是图片的高度
举个例子 p = -157px 58px  那么拼图的位置就向左边移动157 向上移动58 然后第一张图片的出现在左上角的地方。  然后一直循环  每次都是不相同的坐标 。之后就能显示一张完整的拼图了。。。
基本到这里。。下面就不用说了。。。     至于你怎么合并 怎么分割就是你的事了。。
        for (var n, o, p, q = 0,
        r = k.length; r > q; q++) p = "-" + (k[q] % 26 * 12 + 1) + "px " + (k[q] > 25 ? -i.height / 2 : 0) + "px",
        n = l.cloneNode(),
        n.style.backgroundPosition = p,
        a.push(n),
        h.appendChild(n),
        o = m.cloneNode(),
        o.style.backgroundPosition = p,
        b.push(o),
        j.appendChild(o);
        e()
    }
到这了。。源码就不发了。。。

Seven3in

好顶支持