仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换只对应ie,ff只能看到一般的切换。这个js做的效果最早在sina看到,这里把这个效果封装好方便使用。
效果:
程序说明:
图片未开始转换时,由于没有图片会显示一个红x,所以隐藏图片:
1 2 | <pre class= "brush:js;toolbar:false;" > this ._img.style.visibility = "hidden" ;</pre><p> </p> |
ps:以前我用this._img.src = "javascript:void(0);";但这个在ie8会出错。
这个变换效果需要滤镜,所以只支持ie。要使用变换滤镜,要先设置filter:
1 2 | <pre class= "brush:js;toolbar:false;" > this ._img.style.filter = "revealTrans()" </pre><p> </p> |
变换之前先设置两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数。
此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。
设置完后还需要运行apply和play方法,分别是应用变换效果和运行效果:
1 2 3 | 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就开始转换了。
然后设置链接:
1 | !!list[ "url" ] ? ( this ._a.href = list[ "url" ]) : this ._a.removeAttribute( "href" ); |
要注意的是这里用removeAttribute去掉a的href才能去掉链接,如果只设为空那么链接还是去不掉的。
使用说明:
首先要实例化一个对象:
1 2 | <pre class= "brush:js;toolbar:false;" > var rvt = new RevealTrans( "idPicShow" );</pre><p> </p> |
idPicShow就是显示变换的容器对象。
有以下这些可选参数和属性:
属性:默认值//说明
Auto: true,//是否自动切换;Pause: 1000,//停顿时间(微妙);Duration: 1,//变换持续时间(秒);Transition: 23,//变换效果(23为随机)
List: [],//数据集合,如果这里不设置可以用Add方法添加
onShow: function(){}//变换时执行
其中List是数据集合,其中每个元素结构是这样的:
1 | { img: 图片url, text: 相关文本, url: 相关链接 } |
在使用时要注意,也可以在实例化之后用Add方法添加:
1 2 3 | <pre class= "brush:js;toolbar:false;" >rvt.Add( 'http://images.51cto.com/files/uploadimg/20120601/1019570.jpg' , '图片变换效果' , 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html' );</pre><p> </p> |
可以一个一个添加,这样方便后台用循环输出数据。
至于图片列表、按钮和文本显示区域是自己扩展的部分,详细请看实例。
全部设置完成后就可以用Start开始变换程序了:
1 2 | <pre class= "brush:js;toolbar:false;" >rvt.Start();</pre><p> </p> |
程序代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <pre class= "brush:js;toolbar:false;" > 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); } };</pre><p> </p> |
下载完整程序
ps:由于有些绿色版ie6会把滤镜功能去掉,所以用这类ie6会看不到效果的,用正宗版本就可以正常浏览了。