JavaScript 图片变换效果(ie only)
来源:cloudgamer 发布时间:2010-01-20 12:40:00
仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换只对应ie,ff只能看到一般的切换。这个js做的效果最早在sina看到,这里把这个效果封装好方便使用。
效果图:
程序说明:
图片未开始转换时,由于没有图片会显示一个红x,所以隐藏图片:
this._img.style.visibility = "hidden";
ps:以前我用this._img.src = "javascript:void(0);";但这个在ie8会出错。
这个变换效果需要滤镜,所以只支持ie。要使用变换滤镜,要先设置filter:
this._img.style.filter = "revealTrans()"
变换之前先设置两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数。
此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。
设置完后还需要运行apply和play方法,分别是应用变换效果和运行效果:
with(this._img.filters.revealTrans){
Transition = this.Transition; Duration = this.Duration; apply(); play();
}
除了这两个方法还有一个stop方法用来停止效果。
下面列出所有效果和对应Transition值(参考手册):
值 : 效果
0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。
其中23比较特别,是随机效果,程序默认就是随机效果。
设置完滤镜效果后就修改图片的src就开始转换了。
然后设置链接:
!!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
要注意的是这里用removeAttribute去掉a的href才能去掉链接,如果只设为空那么链接还是去不掉的。
使用说明:
首先要实例化一个对象:
var rvt = new RevealTrans("idPicShow");
idPicShow就是显示变换的容器对象。
有以下这些可选参数和属性:
属性:默认值//说明
Auto: true,//是否自动切换
Pause: 1000,//停顿时间(微妙)
Duration: 1,//变换持续时间(秒)
Transition: 23,//变换效果(23为随机)
List: [],//数据集合,如果这里不设置可以用Add方法添加
onShow: function(){}//变换时执行
其中List是数据集合,其中每个元素结构是这样的:
{ img: 图片url, text: 相关文本, url: 相关链接 }
在使用时要注意,也可以在实例化之后用Add方法添加:
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
可以一个一个添加,这样方便后台用循环输出数据。
至于图片列表、按钮和文本显示区域是自己扩展的部分,详细请看实例。
全部设置完成后就可以用Start开始变换程序了:
rvt.Start();
猜你喜欢
- 这篇文章主要是把ASP代码变成组件,开发者不仅是加快了ASP的速度,而且也能保护加密自己的代码,编译asp代码为dll组件我想这个是最好的保
- 我们可用一个函数来实现小数转分数,不过只能转换能够整除的分数:Public Function XtoF(str 
- 本程序属于一种特别的方法。使用范围比较有限,而且有一定的危险性。借鉴了asp后门里的一些方法。由于读取某IP的网卡MAC地址本程序通过调用a
- 在JavaScript开发中,被人问到:null与undefined到底有啥区别?一时间不好回答,特别是undefined,因为这涉及到un
- 在编写 XMLHttpRequest 请求时,需要掌握服务器端返回的内容。针对 Firefox 浏览器,我们常用的 Firebug 就能非常
- 定义列表和其他类型的列表稍有不同,它由两部分组成:名称和定义。DT 指定名称,为内联元素。DD 指定定义,为块级元素。标准属性id, cla
- 可试试下面这个方法,但要保证在FORM中使用的Input Name都和数据库中使用的是一样的:upfiles.asp<% &
- 数据库的表Info,表部分结构:Info_Id  
- 怎么用javascript进行拖拽本文译自:http://www.webreference.com/programming/javascri
- 就MySQL而言,大多数程序员都不太了解其设计背景,因此当他们尝试创建自己的数据库时,会留下很多漏洞。要想为MySQL数据库进行合适的配置,
- MSDN:包含正在 SQL Server 实例上运行的进程的相关信息。这些进程可以是客户端进程或系统进程。 视图中主要的字段: 1. Spi
- Access 操作很简单,具体不步骤如下:打开你mdb数据库,工具-->数据库实用工具-->压缩和修复数据库(c)... SQL SERVE
- 这几天刚刚做了这个东西,有网友问到,所以分享一下。ie6、firefox2 通过,麻烦有ie7的网友测试一下,由于有其他代码,剖析出来麻烦,
- 在asp里通过以下两个函数实现javascript里的escape函数和unescape函数
- 简单方法实现网页自动适应任何分辨率任何窗口大小(只适用于IE)<!DOCTYPE html PUBLIC "-//W3C//
- 字体的处理在网页设计中无论怎么强调也不为过, 毕竟网页使用来传递信息的, 而最经典最直接的信息传递方式就是文字,&nbs
- 如果你经常浏览网页一定见过很多网站在form表单中的文本域(textarea)中添加了的背景图片,一般是使用网站的logo,我记得我最早注意
- list.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="936&qu
- 1.1.1 摘要 如果说要对数据库进行优化,我们主要可以通过以下五种方法,对数据库系统进行优化。 1. 计算机硬件调优 2. 应用程序调优
- 说到网络产品,离不开的话题就是用户,就像传统行业的消费者。人是复杂的,网民的用户行为更加复杂,用户和用户是不一样的,或者说,每个用户都不一样