jQuery图片模糊插件crossfade.js_dowebok
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
【jQuery图片模糊插件crossfade.js_dowebok】相关文章 1. jQuery图片模糊插件crossfade.js_dowebok 3. 一个独特的jQuery图片幻灯片插件AviaSlider 4. 摩托罗拉系统推出业界首款可基于Windows Embedded Handheld和Windows CE设备框架 ... 10. jQuery图片分组分页插件 本文来源:https://www.51html5.com/a1409.html ﹝jQuery图片模糊插件crossfade.js_dowebok﹞相关内容
「jQuery图片模糊插件crossfade.js_dowebok」相关专题其它栏目也许您还喜欢
|