V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PainAndLove
V2EX  ›  程序员

这个对战图里的高亮效果怎样实现呢。 hover 到某个节点,能高亮对应的路径

  •  
  •   PainAndLove · 2022-02-15 18:43:39 +08:00 · 1897 次点击
    这是一个创建于 1010 天前的主题,其中的信息可能已经有所发展或是发生改变。
    12 条回复    2022-02-16 11:34:10 +08:00
    ragnaroks
        1
    ragnaroks  
       2022-02-15 20:10:05 +08:00
    不考虑样式表,这是一个倒过来的"Tree"
    PainAndLove
        2
    PainAndLove  
    OP
       2022-02-15 20:18:14 +08:00
    @ragnaroks 好像不是,tree 的话,节点 ID 是不能重复的,但是上面的某个队伍可以同时出现在上下。
    ragnaroks
        3
    ragnaroks  
       2022-02-15 20:24:59 +08:00
    @PainAndLove 节点 id 和队伍无关,或者说都不需要所谓 id ,多级数组就行了
    LeeReamond
        4
    LeeReamond  
       2022-02-15 23:05:20 +08:00
    你确定是纯 css 实现的吗,那倒是相当高级了感觉。。
    w88975
        5
    w88975  
       2022-02-15 23:41:06 +08:00
    鼠标 hover 到某个节点,寻找这个 team-**** 的 ID ,把所有该 ID 加上高亮不就搞定了吗
    w88975
        6
    w88975  
       2022-02-15 23:42:22 +08:00
    例如: $('.team-3522').addClass('team-match-hover')
    Vegetable
        7
    Vegetable  
       2022-02-16 00:03:49 +08:00   ❤️ 1
    lslqtz
        8
    lslqtz  
       2022-02-16 06:22:35 +08:00
    js 实现的话挺简单,都不需要 id ,相同颜色就可以
    myl0204
        9
    myl0204  
       2022-02-16 09:19:09 +08:00
    恭喜雪碧
    guoziq09
        10
    guoziq09  
       2022-02-16 10:03:59 +08:00
    为啥不 ban 猛犸?
    lisongeee
        11
    lisongeee  
       2022-02-16 10:19:44 +08:00
    hover 的时候路线可以变成移动的虚线
    wednesdayco
        12
    wednesdayco  
       2022-02-16 11:34:10 +08:00
    这 js 实现的


    J_bracketArea.on('mouseover', '.matchteam', function (e) {
    var _self = $(this)
    _classString = _self.attr('class')
    _class = _classString.split(' ')
    if (_self.hasClass('team-')) {
    return
    }
    for (var i = 0; i < _class.length; i++) {
    var Is_team = _class[i].indexOf('team-')
    if (Is_team === 0) {
    var team_van = _class[i],
    all_team_van = $('.' + team_van),
    all_team_line_van = $('.line' + team_van)
    all_team_van.addClass('team-match-hover')
    all_team_line_van.addClass('linematch')
    console.log(all_team_line_van)
    stack = stack.add(all_team_van)
    linestack = linestack.add(all_team_line_van)
    }
    $('.team-match-hover').parent().parent().css(moveTop)
    }
    }).on('mouseout', '.matchteam', function (e) {
    $('.team-match-hover').parent().parent().css(moveNoraml)
    stack.removeClass('team-match-hover')
    linestack.removeClass('linematch')
    stack = $()
    linestack = $()
    })
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3579 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 00:52 · PVG 08:52 · LAX 16:52 · JFK 19:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.