您当前所在位置: 首页 >> 特效库 >> 其他特效

jQuery图片模糊插件crossfade.js

2015年07月11日 来源:网络 13

简介

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 属性,则不需要这这两个属性了。


最新更新特效

jQuery幻灯片插件 – Resp

2015年07月11日12

jQuery图片模糊插件crossf

2015年07月11日13

jQuery全屏滚动插件fullPa

2015年07月11日22

jQuery cxSelect 多级

2015年06月19日30

CSS3瀑布流网页特效

2014年12月30日96

HTML5+CSS3鼠标悬停图片事件

2014年12月16日130
关于设界| 主营业务| 服务流程| 建站套餐| 成品选购| 案例展示| 特效库| 新闻中心
设界风向标 ©2014 eshejie.com All rightsreserve.
地址:成都物流大道普洛斯A线
蜀ICp备14005826号-1 站长统计
温馨提示: 请客户合作时务必审查对方能否提供以往作品原始文件及客户相关负责人信息;请勿上当受骗。
客服电话:028-64866096
客服 QQ:2739394928
投诉电话:13688028095
电子邮件:eshejie@163.com eshejie@qq.com
官网网址:www.eshejie.com