【问题标题】:JQuery - make an element go "fuzzy"JQuery - 使元素变得“模糊”
【发布时间】:2011-04-03 16:09:39
【问题描述】:

我最近一直在为一家公司开发一个网站,该网站具有完整的管理前端/CMS。在管理前端,很遗憾,出于安全原因我无法向您展示,有一个范围列表、集合列表和设计列表。我想让这些链接与 JQuery 一起工作,因此单击“范围”会将范围列表带到前面并淡出当前活动的列表,同时使其变得模糊。我想让 Range 列表默认位于其他列表的前面,不透明度约为 50%(疯狂猜测)。但是,如果不透明度为 50%,您仍然可以看到它后面的文本(在其他列表中)。我希望背景中的文本(“后面”列表)是灰色和模糊的,就像我刚刚注意到的效果一样,如果您在 Windows Live Mail 前面有一个 Windows 照片查看器窗口 - 状态文本 a 的右下角Windows Live Mail 是模糊的,在后面的窗口上很明显)。我还希望前景中的文本是黑色的并且是焦点。更改文本颜色很容易(peezy lemon squeezy!)。我在“JQuery 模糊”和类似术语上做了一个快速的谷歌搜索,但一无所获。

谁能告诉我是否有办法做到这一点(最好像 $(selector).fuzz(50%); 一样简单)?

提前致谢。

问候,

理查德

【问题讨论】:

    标签: jquery jquery-ui opacity fuzzy


    【解决方案1】:

    当你期待一个答案时,发现一个无益的争吵总是令人失望。我不会判断“模糊化”一个元素的必要性——相反,我只是想提供帮助。

    我见过的实现这种效果的唯一简单方法是使用一个名为“Spoiler Alert”的 jQuery 插件 -- http://joshbuddy.github.io/spoiler-alert/

    【讨论】:

      【解决方案2】:

      不,使用 CSS 或 jQuery,您不能“轻松”地做到这一点。

      甚至不是复杂的解决方法,除非您考虑将表单当前状态的屏幕截图发送到服务器,然后让它发回处理后的版本以显示,很简单。

      根本没有解决方案,不是任何人都想要这个。如果您需要背景不会在视觉上干扰前景,只需将不透明度降低到 80-90% 左右即可。

      【讨论】:

      • “不是任何人都想要这个”——我想要它,因为它增加了一个非常简洁的效果(或者可以做到,如果与其他效果的正确组合一起使用)。我想做的是让它看起来好像一个列表越来越近并且变得更加专注,而之前关注的那个越来越远并且写作有点融合在一起。它应该给它一种未来主义的效果。
      • @ClarkeyBoy 我知道你想要什么——你的问题很清楚。只是考虑到不透明度可以用于相同的效果,这样的效果几乎没有什么好处。哦,我坚持我的话——“它是一种非常简洁的效果”并不是将这种效果添加到您的表单中的好理由,即使它存在。为什么你甚至期望这种东西是可用的?
      • 为什么我希望这种东西可用?好吧,因为您可以使用 JQuery 或 JQuery UI 做很多巧妙的事情,比如滑动元素、从列表中创建选项卡等等,我认为这可能是可能的。我只是在问我是否遗漏了什么。在你指出之前,我很欣赏标签和类似的东西是通过使用 JS 在 dom 中添加或删除元素来创建的,并且创建模糊效果需要更多的处理等等 - 我只是认为在巨大的库是 JQuery 可能可以做到这一点,仅此而已。
      • PS 我不是菜鸟,尽管我可能听起来像菜鸟。这是我的第一个项目,我还有更多的项目 - 我的 .net 经验跨越了 2 年,从我从事有偿工作开始。我的 JQuery 经验有些有限,因为在安置时不需要它(我在一个必须尽可能接近每个人的委员会工作)所以我唯一的经验是几个月今年早些时候,我有一些空闲时间。我也有 3 年的 PHP 经验,即将完成计算学位。
      • @ClarkeyBoy 对不起,如果我粗鲁。这里有太多的问题询问 jQuery 是否可以做一些荒谬的事情。 jQuery 和 jQ UI 可以产生“漂亮效果”的方式完全基于 CSS - jQuery,并且作为扩展,所有 Javascript 都只能操纵应用于元素的样式。像您所要求的那样,即使考虑到所需的处理是可能的,单独使用 Javascript 也无法实现,即使使用庞大的库也不行。在这里询问有关 jQuery 功能的问题之前,我建议您查看它们...
      猜你喜欢
      • 2017-09-19
      • 1970-01-01
      • 2014-03-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多