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

要是在家闲着没事的话,帮我看下这种搜索按钮是怎么实现的

  •  
  •   xinhangliu · 2018-02-14 10:48:38 +08:00 · 5155 次点击
    这是一个创建于 2458 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是 Medium 的搜索按钮,这几天在家自己捣鼓博客主题,想换这种搜索按钮,但是不知道如何实现,没有思路。

    请大家帮帮忙。

    21 条回复    2018-02-16 12:18:45 +08:00
    loading
        1
    loading  
       2018-02-14 10:52:15 +08:00 via Android   ❤️ 2
    放大镜是一个元素,绑定了点击事件,然后更改输入框宽度。

    当然,有更优雅的方式吧。
    a570295535
        2
    a570295535  
       2018-02-14 10:52:47 +08:00   ❤️ 1
    设置默认隐藏,js 点击显示 /隐藏啊
    dibage
        3
    dibage  
       2018-02-14 10:53:12 +08:00   ❤️ 1
    图标用的应该是字体图标,然后实现逻辑很简单:
    点击搜索按钮(搜索按钮是一个 div,长度假设为 50px,点击后,设置长度为 300px,(假设))
    可以通过 js 和 css 实现,搜索按钮后边的输入框是隐藏的,点击后向左展开显示,然后 focus 了

    应该很简单吧。。认真脸
    xubeiyan
        4
    xubeiyan  
       2018-02-14 10:53:23 +08:00 via Android   ❤️ 1
    就是搜索图标绑定个点击事件,使隐藏的 input 显示,并焦点聚集,input 失焦则隐藏它
    xinhangliu
        5
    xinhangliu  
    OP
       2018-02-14 10:54:01 +08:00
    @loading
    @a570295535

    这能用纯 CSS 实现吗?
    loading
        6
    loading  
       2018-02-14 11:02:16 +08:00 via Android
    应该可以纯 css。我还在摸鱼。
    snarkprayer
        7
    snarkprayer  
       2018-02-14 11:06:08 +08:00   ❤️ 1
    这...
    medium 的实现方式是,图标跟 input 都在一个 label 标签下,给图标绑定点击事件,点击切换 label 的 classname,在这个 classname 下,input 的宽度是 200

    动画效果是给 input 一个 css 规则,transition (过渡动画)
    jin5354
        8
    jin5354  
       2018-02-14 11:07:08 +08:00   ❤️ 3
    纯 css 可以用 label + input + : checked 实现
    snarkprayer
        9
    snarkprayer  
       2018-02-14 11:08:16 +08:00
    @xinhangliu 纯 css 方式你可以搜索 单复选框元素显隐技术
    snarkprayer
        10
    snarkprayer  
       2018-02-14 11:11:24 +08:00
    我更正下....
    点击图标直接给了 input:focus 状态,input:focus 下宽度变化了....
    jin5354
        11
    jin5354  
       2018-02-14 11:11:42 +08:00
    上面写错了 单选复选框用 :checked 文本输入框用 :focus 哈
    Chingim
        12
    Chingim  
       2018-02-14 11:14:26 +08:00 via Android   ❤️ 1
    纯 css 的话,在搜索图标上放一个 z-index 比较大的 checkbox,opacity 设置为 0。利用:checked 状态改写输入框的样式

    缺点是点击其他地方没法收起输入框
    xiaody
        13
    xiaody  
       2018-02-14 11:17:01 +08:00   ❤️ 1
    UnluckyNinja
        14
    UnluckyNinja  
       2018-02-14 11:30:43 +08:00   ❤️ 1
    这不就是 MD 里导航栏搜索按钮吗…… https://getmdl.io/components/index.html#layout-section 这里也有个例子,看起来是 JS 实现的,搜相关关键字应该也很容易搜到其他例子
    UnluckyNinja
        15
    UnluckyNinja  
       2018-02-14 11:40:16 +08:00
    BTW medium 这个应该是纯 CSS 的,元素没绑定任何鼠标事件
    ImJoeHs
        16
    ImJoeHs  
       2018-02-14 14:50:14 +08:00   ❤️ 1
    1. label for + 2. focus 伪类 + 3. transition
    rogwan
        17
    rogwan  
       2018-02-14 15:23:56 +08:00 via Android   ❤️ 3
    搜索直接搜( Google.com 那种),和搜索框点一下再 input 搜,是本质区别。两此点击怎么搞,都是表面功夫,很不爽
    rogwan
        18
    rogwan  
       2018-02-14 15:25:53 +08:00 via Android
    宁可表单框小一点,直接搜的体验好多了,现在不知道怎么搞的,都是搜索图标,点击才能搜。可能是移动 APP 化的原因吧,顶部空间不够
    lianxiben
        19
    lianxiben  
       2018-02-14 18:13:53 +08:00   ❤️ 1
    这个实现给放大镜绑定一个事件就可以了吧。。。
    zhwithsweet
        20
    zhwithsweet  
       2018-02-14 23:02:12 +08:00   ❤️ 1
    transformX(90%), transition all .5s
    js
    方向 target = false
    @click transformX(0); target = false else targetformx(90%) target = true
    Telegram
        21
    Telegram  
       2018-02-16 12:18:45 +08:00 via iPhone
    围观一群前端大佬
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1078 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:08 · PVG 03:08 · LAX 11:08 · JFK 14:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.