js 怎样做出类似 os x 设置搜索时变暗的效果?

2014-06-14 16:51:56 +08:00
 yangzh
就是我有这么一个输入框,里面输入 one 的时候,只有内容是 one 的 div 亮起来。

<div>one</div>
<div>two</div>
<div>three</div>

效果类似于 http://km.support.apple.com/library/APPLE/APPLECARE_ALLGEOS/HT2490/en_US/HT2490_prefs_search_en.png 这种。大家给个思路?
2453 次点击
所在节点    问与答
2 条回复
qiayue
2014-06-14 17:30:45 +08:00
亮的效果用背景图片或者颜色实现
所以就是修改 one 所在的 div 背景
用 jQuery 的话,可以用 addClass() removeClass() 或者 css()
scarlex
2014-06-14 20:40:35 +08:00
先弄一层半透明黑色的背景, 并设置z-index为10。
然后搜索匹配的时候就动态调节其他层的z-index值。
像例子中那样就把one的div的z-index设为11,变亮的话就调节一下css就行了。
感觉上可以这么做,但没试过。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/117494

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX