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();
猜你喜欢
- 1 环境准备192.168.1.34 服务器A(主机)192.168.1.35 服务器B(从机)2 安装mysqlMySQL版本:这里采用S
- 使用File实现文件上传使用Form表单上传文件,fastapi使用File获取上传的文件。指定了参数类型是bytes:file: byte
- 前言上篇文章给大家带来了PHP中最基本的特性,不知道大家学习的怎样了,回顾上文,我们讲了MD5强弱碰撞以及正则匹配的绕过,总体来看还是很简单
- 《Patterns for Sign Up &Ramp Up》很早就读完了,之所以今天才写读后感,细细读完了发现,它更为接近吸引注册
- 所谓产品其实最终展现在用户面前的只是界面而已,所谓界面绝大多数时候只包括两个部分:图片、文字。重视界面上的每一个像素和每一个文字是UED的基
- 1.理论只要两个表的公共字段有匹配值,就将这两个表中的记录组合起来。个人理解:以一个共同的字段求两个表中符合要求的交集,并将每个表符合要求的
- 首先有一段以下结构体的定义type User struct {UserName stringUserId int `name:
- MYSQL对大小写敏感见字如面,见标题知内容。你有遇到过因为MYSQL对大小写敏感而被坑的体验吗?之前看过阿里巴巴Java开发手册,在MyS
- 前言如果我们和面试官聊到事务的问题,怎么回答呢?先说下事务是什么,因为我们业务是比较复杂的,不可能一个sql就能解决的,涉及多个sql就组成
- python 生成 exe 文件的方法:首先安装 pyinstaller,代码为【pip install pyinstaller】;然后使用
- 使用 Python 进行数据处理的时候,常常会遇到判断一个数是否在一个区间内的操作。我们可以使用 if else 进行判断,但是,既然使用了
- 还记得以前在工作中,将爬来的其它网站的数据导到xml。但是会遇到一个问题:即网页会有ascII的控制字符。一开始以为是别人为了防止采集而加入
- 导言:在前面的教程里我们探讨了如何为GridView控件添加radio buttons列。当用户最多只能选择一项数据时,我们可以在用户界面里
- 在利用DL解决图像问题时,影响训练效率最大的有时候是GPU,有时候也可能是CPU和你的磁盘。很多设计不当的任务,在训练神经网络的时候,大部分
- 前言在Python开发中,有些情况下,我们可能面临在一台机器上同时安装多版本Python的需求。比如:有多个Python项目,每个项目依赖不
- 一、概述公司需要通过网页用户认证登录实现上网,网络设备判断当前帐号12小时没有没上网将会自动断开帐号上网,每天早上上班第一件事就是打开用户认
- 前言最近在做文本统计,用 Python 实现,遇到了一个比较有意思的难题——如何保存统计结果。直接写入内存实在是放不下,十几个小时后内存耗尽
- 1. 线程的概念线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元。一个标准的线程由线程I
- 前言一些公司内部的CMS系统存在某些内容让指定的用户有权限访问,这时候可以用django自带的权限管理进行限制,比较方便。缺点:django
- 如果视图定义包括条件(譬如 WHERE 子句)并且其意图是确保任何引用该视图的 INSERT 或 UPDATE 语句都应用 WHERE 子句