当前位置:jQuery学习 > jQuery > jQuery图片滤镜的实现

jQuery图片滤镜的实现

时间:2010-05-21QQ群:116983258

标题可能和jquery没太大关系,但本人主要用jquery,所以取名如此。言归正传,滤镜常用在相册等,使访问者在浏览图片时,不至于太单一。

实现方法如下:

1、添加img标签,用来显示图片

<img id="iimage" class="iimage" />

2、设置css样式:

.iimage
{
    border:0px solid #015dca;
    display:block;filter:revealTrans(duration=1,transition=23);
    max-width:650px;
    width: expression(this.width > 650 && this.width > this.height ? 650px : this.width;); 
    max-height:1650px;
    height: expresion(this.height > 1650 ? 1650px : this.height;);
}

其中filter:revealTrans(duration=1,transition=23);为图片设置了滤镜的效果。Duration为效果持续时间,单位为秒;transition为随机显示各种效果。同时为图片设定了最大显示宽度。

3、用jQuery实现最终效果

//首先判断是否存在滤镜,如果存在则应用滤镜效果
if (jQuery("#iimage")[0].filters) {
   //每次请求应用不同的效果
   jQuery("#iimage")[0].filters.revealTrans.Transition = 23;
     jQuery("#iimage")[0].filters.revealTrans.apply();
     jQuery("#iimage")[0].filters.revealTrans.play();
}
//最后设置图片的路径
jQuery("#iimage").attr("src", v);

至此实现了图片的滤镜效果。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-image-transition.html

所有话题