JavaScript 图片变换效果(ie only)(2)
来源:cloudgamer 发布时间:2010-01-20 12:40:00
程序代码:
var RevealTrans = Class.create();
RevealTrans.prototype = {
initialize: function(container, options) {
this._img = document.createElement("img");
this._a = document.createElement("a");
this._timer = null;//计时器
this.Index = 0;//显示索引
this._onIndex = -1;//当前索引
this.SetOptions(options);
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.Duration = Math.abs(this.options.Duration);
this.Transition = parseInt(this.options.Transition);
this.List = this.options.List;
this.onShow = this.options.onShow;
//初始化显示区域
this._img.style.visibility = "hidden";//第一次变换时不显示红x图
this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;
this._img.onmouseover = Bind(this, this.Stop);
this._img.onmouseout = Bind(this, this.Start);
isIE && (this._img.style.filter = "revealTrans()");
this._a.target = "_blank";
$(container).appendChild(this._a).appendChild(this._img);
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Auto: true,//是否自动切换
Pause: 1000,//停顿时间(微妙)
Duration: 1,//变换持续时间(秒)
Transition: 23,//变换效果(23为随机)
List: [],//数据集合,如果这里不设置可以用Add方法添加
onShow: function(){}//变换时执行
};
Extend(this.options, options || {});
},
Start: function() {
clearTimeout(this._timer);
//如果没有数据就返回
if(!this.List.length) return;
//修正Index
if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }
//如果当前索引不是显示索引就设置显示
if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }
//如果要自动切换
if(this.Auto){
this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);
}
},
//显示
Show: function(list) {
if(isIE){
//设置变换参数
with(this._img.filters.revealTrans){
Transition = this.Transition; Duration = this.Duration; apply(); play();
}
}
this._img.style.visibility = "";
//设置图片属性
this._img.src = list.img; this._img.alt = list.text;
//设置链接
!!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
//附加函数
this.onShow();
},
//添加变换对象
Add: function(sIimg, sText, sUrl) {
this.List.push({ img: sIimg, text: sText, url: sUrl });
},
//停止
Stop: function() {
clearTimeout(this._timer);
}
};
源码下载地址:RevealTrans.rar (2.68 KB)
ps:由于有些绿色版ie6会把滤镜功能去掉,所以用这类ie6会看不到效果的,用正宗版本就可以正常浏览了。


猜你喜欢
- 格式print <<EOFyou text go hereEOFsub usage{ pri
- 本文实例主要实现的是python根据unicode判断语言类型,具体如下。实例代码:def is_chinese(uchar): "
- Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下Vue版本: 1.0.24 Vue-validator版本: 2
- 准确地说, 这个标题是有问题的, go gin只能给浏览器返回操作cookie的指令, 真正执行cookie操作的是浏览器。 但广泛地来讲,
- 出自: 编程中国 http://www.bc-cn.net作者: 天涯听雨 &nbs
- 当很多人发现在DW4中定义CSS很方便的时候,开始报怨FP2000不能定义CSS,甚至就此抨击FP2000如何的不好。事实上,在FP2000
- CentOS7的yum源中默认好像是没有MySQL的。为了解决这个问题,我们要先下载mysql的repo源。1. 下载mysql的repo源
- k-近邻算法概述简单地说,k近邻算法采用测量不同特征值之间的距离方法进行分类。k-近邻算法优点:精度高、对异常值不敏感、无数据输入假定。缺点
- 答案先有 “类属性”,再有 “运行 metaclass”#
- 本文实例讲述了python去除所有html标签的方法。分享给大家供大家参考。具体分析如下:这段代码可以用于去除文本里的字符串标签,不包括标签
- 本节主要介绍函数,但是函数是由操作组成的。那么就分为两部,一部分为操作一部分为函数。py世界中的操作。操作if:在学习任何一门语言中,关系i
- 二维矩阵的transpose函数:不晓得该怎么起头,直接上干货。transpose()简单来说,就相当于数学中的转置,在矩阵中,转置就是把行
- 本文是基于上一篇(python项目:学生信息管理系统(初版) )进行了完善,并添加了新的功能。主要包括有:完善部分:输入错误;无数据查询等异
- 起步在 Django 的模型中新加了一个日期的字段:import datetimeclass Instance(models.Model):
- 字符串’^198[0-9]$’可以匹配‘1980-1989’
- 本文实例为大家分享了python开发飞机大战游戏的具体代码,供大家参考,具体内容如下import pygameimport randomim
- 如下拉框的text是<input type=button value=ggg>,那么生成的combobox里
- 创建SQL存储过程需要使用到的语法- 创建存储过程CREATE 存储过程的名称(参数)BEGIN...需要执行的SQL语句END- 调用CA
- sql替换语句,用该命令可以整批替换某字段的内容,也可以批量在原字段内容上加上或去掉字符。命令总解:update 表的名称 set 此表要替
- 如下所示:#-*- coding: utf-8 -*-#code:myhaspl@qq.com#12-1.pyimport sysreloa