adaptive-background.js

关于

adaptive-background.js是一款jQuery插件,可以根据div,img标签里图片的边框颜色来动态调整父标签的背景颜色,有点类似iTunes的专辑详情的效果,如图:

使用

adaptive-backgrounds.js的API比较容易使用,只需要在页面中先包含jQuery和adaptive-backgrounds.js文件。然后运行脚本:

$(document).ready(function(){
      $.adaptiveBackground.run()
});

在需要实现该效果的标签加入data-adaptive-background属性,如:

<img src="/image.jpg" data-adaptive-background=‘1‘>

或者在CSS指定背景图片的标签中使用该功能,比如div,需要在div标签中再加入data-ab-css-background属性,如:

<div style=‘background-image: url(/some-image.jpg)‘ data-adaptive-background=‘1‘ data-ab-css-background=‘1‘></div>

效果

demo

Github

briangonzalez/jquery.adaptive-background

时间: 2024-08-11 07:42:04

adaptive-background.js的相关文章

chrome插件background.js 和 popup.js 交互

要实现background.js 和 popup.js 之间的交互,首先需要先配置好 manifest.json文件,如: "background":{ //"page":"background.html", "scripts":["js/jquery-1.10.2.min.js","js/background.js"] } 必须要配置好 background 项,background.

开发chrome 插件, background.js中 console log 看不到解决方法

http://stackoverflow.com/questions/10257301/where-to-read-console-messages-from-background-js-in-a-chrome-extension

vue的测试(Vue.js devtool)

1. 安装chrome插件:Vue.js devtools(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN) 2. 下载vue-devtools (https://github.com/vuejs/vue-devtools) 3. 修改文件:vue-devtools-master/shells/chrome/manifest.json 1 2 3

Node.js异步处理CPU密集型任务

Node.js擅长数据密集型实时(data-intensive real-time)交互的应用场景.然而数据密集型实时应用程序并不是只有I/O密集型任务,当碰到CPU密集型任务时,比如要对数据加解密(node.bcrypt.js),数据压缩和解压(node-tar),或者要根据用户的身份对图片做些个性化处理,在这些场景下,主线程致力于做复杂的CPU计算,IO请求队列中的任务就被阻塞. Node.js主线程的event loop在处理所有的任务/事件时,都是沿着事件队列顺序执行的,所以在其中任何一

转:Node.js异步处理CPU密集型任务的新思路

原文来自于:http://www.infoq.com/cn/articles/new-idea-of-nodejs-asynchronous-processing-tasks?utm_source=infoq&utm_medium=popular_links_homepage Node.js擅长数据密集型实时(data-intensive real-time)交互的应用场景.然而数据密集型实时应用程序并不是只有I/O密集型任务,当碰到CPU密集型任务时,比如要对数据加解密(node.bcrypt

Best jQuery Plugins of the Month – May 2014

1. jQuery referenceSection jQuery referenceSection by Scott Mascio ensures to help users in adding a reference section to page along with the description of each selected elements that can be seen on hovering. Demo | Download 2. Address Field Address

Selenium chrome配置代理Python版

环境: windows 7 + Python 3.5.2 + Selenium 3.4.2 + Chrome Driver 2.29 + Chrome 58.0.3029.110 (64-bit) Selenium官方给的Firefox代理配置方式并不起效,也没看到合适的配置方式,对于Chrome Selenium官方没有告知如何配置,但以下两种方式是有效的: 1. 连接无用户名密码认证的代理 chromeOptions = webdriver.ChromeOptions() chromeOpt

Selenium + Chrome Diver使用带用户名密码认证的HTTP代理的方法

默认情况下,Chrome的--proxy-server="http://ip:port"参数不支持设置用户名和密码认证.这样就使得"Selenium + Chrome Driver"无法使用HTTP Basic Authentication的HTTP代理.一种变通的方式就是采用IP地址认证,但在国内网络环境下,大多数用户都采用ADSL形式网络接入,IP是变化的,也无法采用IP地址绑定认证.因此迫切需要找到一种让Chrome自动实现HTTP代理用户名密码认证的方案.

总结一些机器视觉库

通用库/General Library OpenCV   无需多言. RAVL  Recognition And Vision Library. 线程安全.强大的IO机制.包含AAM. CImg  很酷的一个图像处理包.整个库只有一个头文件.包含一个基于PDE的光流算法. 图像,视频IO/Image, Video IO FreeImage DevIL ImageMagick FFMPEG VideoInput portVideo AR相关/Augmented Reality ARToolKit 

[转]计算机视觉、机器学习相关领域论文和源代码大集合

计算机视觉.机器学习相关领域论文和源代码大集合--持续更新…… [email protected] http://blog.csdn.net/zouxy09 注:下面有project网站的大部分都有paper和相应的code.Code一般是C/C++或者Matlab代码. 最近一次更新:2013-3-17 一.特征提取Feature Extraction: ·         SIFT [1] [Demo program][SIFT Library] [VLFeat] ·         PCA