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

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上看一下。

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

推荐阅读