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会看不到效果的,用正宗版本就可以正常浏览了。
猜你喜欢
- 在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的
- 我们进行CSS网页布局的时候,都知道它需要符合XHTML1.0规范。如果我们在进行CSS网页布局的时候,还在使用被W3C废弃的元素,那就失去
- 第一步:创建转向控制页面创建网站默认的首页文件(通常为"index.asp"或"default.asp&quo
- 记得从ymPrompt2.0的时候自己就遇到过在IE下有时会莫名其妙的提示“无法打开Internet站点 已终止操作”,这样的一个错误很让人
- 方法很简单,实现原理:使用asp的Request.ServerVariables("HTTP_REFERER") 判断来
- 所以对应的asp处理代码如下代码如下:dedearr=split(xiangguanid2,chr(13)) '分割成数组
- InnoDB和MyISAM是在使用MySQL最常用的两个表类型,各有优缺点,视具体应用而定。下面是已知的两者之间的差别,仅供参考。1.Inn
- SQL Server 2008的一些新特点及独到之处:设置和安装SQL Server 2008的设置和安装也有所改进。配置数据和引擎位已经分
- Ajax 技术改变了大型商业 Web 应用程序的外观,但是许多较小的 Web 站点都不具备足够的资源重新构建完整的用户界面(UI)。Ajax
- 前几天开始原来的google pr查询接口已经失效,导致很多站长工具pr查询功能不能使用原始pr查询接口:$string =&nb
- 阅读上一篇:成为一个顶级设计师的第一准则限制你的色彩成为一个顶级设计师的7个简单原则的第二部分限制使用你的色彩。好象上个准则是让你限制用你的
- 1.如果每页都增加打印时间,又如何设置?打印时间的,你可以参考 for(var i=0;i<page.length;i++)
- 我们平常用 IE 打开一个普通的本地 xml 文件,其形式通常都是如下图: 默认样式看得多了就不觉得有什么特别。但对于少接触 xml 的人来
- ie的javascript失效了,不是设置的问题那么就可能是以下几点问题了~安装KAV可能会破坏系统的javascript关联,失javas
- 如何用表单的方式推送请求的信息?具体见下:<html><head><title>答复用户信息
- 回想自己从事Web方面的开发已经有6-7年,对于各种Web技术都已经非常熟悉.可是,身为程序员的我对于制作Web表单界面的事着实心痛。心痛1
- 引子:今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块
- 目前SQL INJECTION的攻击测试愈演愈烈,很多大型的网站和论坛都相继被注入。这些网站一般使用的多为SQL SERVER数据库,正因为
- 今天有个服务器速度变得非常慢,用工具一看,IIS堵塞进程达到100多个,肯定有问题,下面进入排查(聚友习惯把过程写出来,如果不需要过程,请直
- <'% '************************************************