V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xxxpara
V2EX  ›  JavaScript

如何实现这种拼图的边框闪烁效果?

  •  
  •   xxxpara · 2015-05-08 17:37:11 +08:00 · 3108 次点击
    这是一个创建于 3488 天前的主题,其中的信息可能已经有所发展或是发生改变。

    http://ww2.sinaimg.cn/bmiddle/69dd3998gw1erwz95y95nj209i099dho.jpg

    就是当某一行/某一列全部都是正确图案的时候,这一行/列的边框就会闪烁,有什么好的实现方案?

    8 条回复    2015-05-16 19:27:09 +08:00
    xxxpara
        1
    xxxpara  
    OP
       2015-05-08 17:52:09 +08:00

    补充一下,像这样,不是每个格子都闪烁
    zkd8907
        2
    zkd8907  
       2015-05-08 17:55:44 +08:00
    控制border-bottom和border-top加class,然后第0个和第3个元素分别加border-left和border-right的class。class效果就写成z-index: 99999; shadow: xxx;这样 =。=?
    xxxpara
        3
    xxxpara  
    OP
       2015-05-08 17:58:25 +08:00
    @zkd8907 这些碎片的位置数组是随机的每次,这样子行不通吧
    chairuosen
        4
    chairuosen  
       2015-05-08 18:06:38 +08:00
    改需求,变成内容变亮就可以了。
    你只高亮边框的话还有一个不规则边缘的判断问题,比如井字形正确时,边框如何显示?
    alex321
        5
    alex321  
       2015-05-08 18:06:58 +08:00
    就是拼图嘛。我说下如果我来做的方式。
    每个图片有个随机标识,每移动一次后,延迟一段时间把图片标识序列发送到后端校验一下。如果校验存在正确的情况,返回正确的标识和序列对应关系,然后前端脚本做分析并高亮处理;如果没有正确的情况,204。
    实现的重点在随机标识以及移动后正确标识的识别,前端脚本的分析与高亮。
    zkd8907
        6
    zkd8907  
       2015-05-08 18:43:38 +08:00
    @xxxpara 但是用户移动以后的位置是可以获取的呀,有了这个位置信息就可以判断顺序了~
    xxxpara
        7
    xxxpara  
    OP
       2015-05-08 19:04:18 +08:00 via Android
    @chairuosen 恩,我也觉得这个需求吃力不讨好
    flowfire
        8
    flowfire  
       2015-05-16 19:27:09 +08:00
    普通拼图 z-index:1
    亮色边框 z-index:2
    正确拼图 z-index:3
    亮色边框在不正确的时候设置opacity 0
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2997 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 13:01 · PVG 21:01 · LAX 05:01 · JFK 08:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.