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

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

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

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

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

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

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

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

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

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

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

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

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

那么,怎么使用它呢?

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

简单的使用此插件的方法

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

演示此插件的应用效果

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

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

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

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

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

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享