jq父元素怎么获取(css设置鼠标悬停状态)


我们在图片类网站开发时, 会遇到这个问题: 长方形的图片,在固定的宽高容器里(DIV),会显示一竖条,毕竟图片是宽高是无规则的,这样一来,看着会有点丑。就如下图所示:

强大的jQuery插件:自动对图片获取主色,实现另类自适应

注意是固定宽高的容量里放的图片

从上边的图,可以看出,一般,我们是固定图片的最大高度(max-height),这样图片不变形的显示在框里,对于左右空白的,会不会看着很突兀,不协调,甚至有点丑吧(个人看法)。

那么,我们怎么来处理左右空白的问题呢?

你也可以把这个问题当成,怎么自适应图片呢? 有一个做法是:把图片放大(不变形的情况下),占满父容器。这样一来,图片上的重要信息,可能会被隐藏。 因此,我们的另一个做法是:用颜色填充左右空白。

既然,我们要填充,就要知道颜色值,图片上就要取色,而且是主色才行,不然看起来也会很突兀。

因此,今天推荐一个取图片主色并应用到父元素背景上的jQuery插件:
jquery.adaptive-background.js。

先来看一下它的效果图吧(针对上图的左右空白处理)

强大的jQuery插件:自动对图片获取主色,实现另类自适应

提取图片颜色并应用到父元素背景上

那么,什么是
jquery.adaptive-background.js呢?

它是一个jQuery插件,依赖于jQuery1.8+,实现从一个图片中提取主要颜色值,并应用到父元素的背景色上。

此插件兼容IE9+,Chrome,Firefox等主流浏览器。

那么,怎么使用它呢?

首先,你需要到github上搜索:
jquery.adaptive-background.js,然后引入页面中,接着如图所示使用就可以了。

强大的jQuery插件:自动对图片获取主色,实现另类自适应

简单的使用此插件的方法

那么,针对实际效果,我们通过放慢速度,来查看一下

强大的jQuery插件:自动对图片获取主色,实现另类自适应

演示此插件的应用效果

是不是,感觉父元素设置了和图片接近的颜色,看着就好多了。

通过$.adaptiveBackground.run()就可以初始化带有data-adaptive-background属性的图片元素了,这里的run(),其实是有配置选项的。

比如:run({normalizeTextColor: true}),它表示:如果图片提取的颜色应用到父元素背景上了,表现的太亮或者太暗,文字显示不清楚了,就自动调节文字的颜色。举例如下:

强大的jQuery插件:自动对图片获取主色,实现另类自适应

为了达到演示效果,我们延迟了2秒

从图上,我们看出,文字的颜色从红色,变成了白色,就是为了不埋没它。

它还有很多配置,这里就不一一列举了,感兴趣的朋友可以到github上看一下。

至此,就介绍完这个强大的取色并自适应背景的插件了,也许它的应用场景比较有限,但是一个好的用户体验,是我们要关注的,不管它的大小如何。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论