html图片控件显示图片不清楚,jQuery图片模糊插件crossfade.js

jQuery图片模糊插件crossfade.js

分类：代码

日期：2016-08-02

点击(44,744)

下载(1)

来源：未知

收藏

简介

crossfade.js 是一个小巧的 jQuery 插件，压缩之后仅 3KB。当页面往下滚动的时候，crossfade.js 会让图片渐渐的模糊，就像是将要淡出的感觉；当页面往上滚动的时候，图片又会变的清晰。

crossfade.js 的原理是两张图片(一张清晰，一张模糊)交替显示，从而造成了淡入淡出的感觉。图片被放置在创建的 canvas 元素中，所以不支持 canvas 元素的浏览器无法显示，如 IE9 以下的浏览器。

兼容

浏览器兼容：兼容 IE9 及以上版本和其他主流现代浏览器。

jQuery 兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

2、HTML

或者可以使用 HTML data 属性，如：

3、CSS

.banner {

position: relative;

height: 500px;

}

这两个 CSS 属性都是必须的。

4、JavaScript

$(function(){

$('.crossfade').crossfade({

start: 'img/01.jpg',

end: 'img/01-blur.jpg',

threshold: 0.3

});

});

start 和 end 这两个属性是必须的，用于指定图片的路径。如果使用了 HTML data 属性，则不需要这这两个属性了。

配置

属性/方法

类型

默认值

说明

start

字符串

无

指定清晰图片的路径

end

字符串

无

指定模糊图片的路径

threshold

整数/浮点数

0.5

切换发生的时间，0 – 1 之间，越小越快发生

backgroundPosition

字符串

center center

背景位置，即图片位置