dowebok

jQuery图片模糊插件crossfade.js

分类:代码 日期: 点击(42,359) 评论(6)

jQuery图片模糊插件crossfade.js

演 示 下 载

简介

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

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

兼容

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

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

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/crossfade.jquery.js"></script>

2、HTML

<div class="banner crossfade">
</div>

或者可以使用 HTML data 属性,如:

<div class="banner crossfade" data-crossfade-start="img/01.jpg" data-crossfade-end="img/01-blur.jpg">
</div>

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 背景位置,即图片位置

演 示 下 载

标签:

相关文章