JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery图片模糊插件crossfade.js_dowebok

jQuery图片模糊插件crossfade.js_dowebok

JQUERY教程  手机阅读

        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

2. jQuery基于图片的元素背景模糊特效插件

3. 一个独特的jQuery图片幻灯片插件AviaSlider

4. 摩托罗拉系统推出业界首款可基于Windows Embedded Handheld和Windows CE设备框架 ...

5. 适合网友学习的Jquery图片轮播插件

6. jQuery图片下滑切换焦点图插件

7. jQuery图片左右滑动焦点图插件

8. jQuery图片放大预览插件

9. jQuery图片分组切换焦点图插件

10. jQuery图片分组分页插件

本文来源:https://www.51html5.com/a1409.html

点击展开全部

﹝jQuery图片模糊插件crossfade.js_dowebok﹞相关内容

「jQuery图片模糊插件crossfade.js_dowebok」相关专题