掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 136|回复: 6

[求助] 請賜教..如何在一個詞條下切換3個 highlight 位置

[复制链接]
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2021-11-21 19:53:01 | 显示全部楼层 |阅读模式
    本帖最后由 喬治兄 于 2021-11-25 21:26 编辑
      z+ N, R; {8 L! y5 W* P* @# ~+ }$ ^8 z! i
    請賜教..如何在一個詞條下切換3個 highlight 位置
    $ ?1 v" s- M. F8 f# ~請各位技術先進不吝賜教....Thanks a lot
    2 p) T7 ^' }: K+ r一個粗略想法,是設計3個按鈕,每一個按鈕分別 highlight 不同位置,但似乎會和之前的highlight 的位置會有重疊,除非設計成3個詞條,但個人比較想要的是在一個詞條內可以實現,有請網友們指點迷津....謝謝啦!. A$ A0 O5 `- N6 T
    6 P# H" v' Y4 w# L' S. W) x
    附圖解釋如下:! B+ E6 A3 q% Q' N  `. V
    目前的 highlight 位置stomach為第一個圖的中間中間較深黃色的那個鐘形曲線的區域,很顯然的并無全部覆蓋其它可能的區域,若要一次包函3個鐘形曲線的區域,怕又過大,顯然如此的 highlight 並不是很好,故想再増加其兩個鐘形曲線所函蓋的區域來處理有些平均值差異較大的分部做為 highlight 的調整位置. \2 U( f9 {2 e, W6 _, Y2 _
    1 r: X9 B5 T1 T, K6 d5 h
    做為調整其定位上差異較大的頁面或各別的單字的 highlight 位置,目前所放的 highlight 的位置為中間較深黃色的鐘形區域的範圍,若碰上各別的標準異差較大,或平均值差異較大時,往往沒匡到,想弄増加其左右的鐘形曲線的區域來 highlight 另外兩個位置點,但希望是在同一個詞頭下完成的,若是每個詞頭要在増加2個詞頭似乎有點累贅,不知 css or html or js 可有簡單一點的處理方法,其主要的目地也就想尋求一個簡易的 css html js 切換 highlight 的模式
    + ~: t9 G: z' X$ \+ P/ L3 v  o2 T* c( I* g
    目前想到的方法:
    " ]1 ~$ E* y  V6 i/ Z* t, z; Q- m; Y
    https://www.w3schools.com/cssref ... =trycss3_transition
    ( t* ^) C5 u6 H, v$ [+ V2 h5 i* Y$ |0 P; n9 E
    1. 目前找到了一個是 transition 的應用,但這樣最多也只能是兩個位置,還缺一個不知如何解決
    9 ~, t8 G' a3 J+ i* g
    # r, {$ ]. P( f" Y2. 用 js 去切換 css 的 class 的方法.....不會 js .....可否提供一個實例照抄既可用的…謝謝啦!1 Q, ]+ o; Q9 I8 }; H1 _% k
    . i/ [* C! H, M
        div class="HW_L"  div class="HW_M" div class="HW_R"" c2 O6 T* F8 i9 k2 G- J
    4 B$ z. O+ Q; _- J1 k4 v
        HW_L,  HW_M,  HW_R ....類似三個 class 的切換
    0 v$ Y  }, z! V5 h& b0 o! ^3 K* c' c3 F, }1 [7 U6 |
        也就是設計 3 個按鈕,每一個按鈕都必需 activate 其中一個的 class , off 其余的兩個 class ,這樣的概念
    ( p2 X/ {, U* o1 x5 u

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?免费注册

    x
  • TA的每日心情
    无聊
    6 小时前
  • 签到天数: 403 天

    [LV.9]以坛为家II

    发表于 2021-11-22 08:50:34 | 显示全部楼层
    给乔治兄顶起来。很高深的样子,小白只能仰望,坐等大神……
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2021-11-22 12:34:39 | 显示全部楼层
    本帖最后由 喬治兄 于 2021-11-22 12:56 编辑 5 ^" k8 S7 b# ^2 R
    iandros 发表于 2021-11-22 08:50/ r& Y- ~4 `8 ?3 c$ [6 p6 [
    给乔治兄顶起来。很高深的样子,小白只能仰望,坐等大神……
    0 q$ X# p" c/ H
    " q* k! }" ?3 i2 m4 g& p0 x  S5 k$ M
    iandros 兄,在下並非大神,用的也並無什高深的學問,只是套用一些統計的概念,也趁著應用實做搞通一些概念,畢竟有實體的應對下會更有感覺和體會,事實上也只是純猜猜位置如此而已,畢竟大略的位置應該是可猜的出來 , 只是有的概率上的差異很大,統計估出的位置僅是大數法則,相對於精確定位容易許多,精確定位相當繁鎖也相對困難許多,在下真搞不出來
  • TA的每日心情
    无聊
    5 小时前
  • 签到天数: 1028 天

    [LV.10]以坛为家III

    发表于 2021-11-23 17:05:19 | 显示全部楼层
    本帖最后由 oversky 于 2021-11-23 17:07 编辑
    0 s  G& w8 S. S( h
    ( n) l0 b% x& T1 N: v+ \可以用元素之间重叠代替吗?* I: a8 z" o  t1 j, X( d
    类似这样的效果?
    6 S- @9 G1 c/ b7 s% Z  i# vhttps://www.w3schools.com/cssref ... e=trycss_js_z-index
  • TA的每日心情
    开心
    10 小时前
  • 签到天数: 158 天

    [LV.7]常住居民III

    发表于 2021-11-24 12:27:19 | 显示全部楼层
    给乔治兄顶起来。很高深的样子,小白只能仰望,坐等大神……
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2021-11-24 14:08:07 | 显示全部楼层
    oversky 发表于 2021-11-23 17:05* _- Z% R3 ~7 s6 _4 d& }
    可以用元素之间重叠代替吗?+ h2 F1 c9 V  @1 h# q
    类似这样的效果?
    5 ?7 T5 L% E! n; ~8 _5 \, E# Uhttps://www.w3schools.com/cssref/tryit.asp?filename=tryc ...
    - c; l4 B* O' D% L' ]# |. `; Z
    Thanks to brother oversky for your good idea
    " o4 k7 o& T* T3 C! A
    % I( x# y. r7 z. R9 n9 B0 Q6 d
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2021-11-24 19:55:02 | 显示全部楼层
    本帖最后由 喬治兄 于 2021-11-24 20:11 编辑 4 v5 Z: j" F! m% U8 S! Y% u
    leonlai2000 发表于 2021-11-24 12:27( {* B% n) z* m* y
    给乔治兄顶起来。很高深的样子,小白只能仰望,坐等大神……
    . u5 O% p) X. R! Q7 w" P

    ( k& ?% N. \) ]( F9 ?1 F謝謝水牛兄的繆讚,在下真胡搞瞎搞的,最近暮鼓晨鐘擠擠越南二輪公車,被公車重重碾壓了幾次,身體差了很多,待補補一陣子再來搞搞,謝謝啦!
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    顶部qrcode底部
    关注掌上百科官方微信公众号送积分
    关注掌上百科官方微信公众号
    关注微信公众号 pdawiki,获取邀请码,看文抢积分,抽奖得浮云! Follow our Wechat official account "pdawiki", get invitation codes, and play the lottery to earn points (积分)!

    小黑屋|手机版|Archiver|PDAWIKI ( 美ICP 0000000字 )|网站地图

    GMT+8, 2021-12-2 18:35 , Processed in 0.030551 second(s), 8 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表