图片切换(滤镜IE Only)

代码演示

 

程序源码

     var  $  =   function (id) {  return  document.getElementById(id) };
     var  isIE  =  navigator.userAgent.indexOf( ' MSIE ' )  !=   - 1   ?   true  :  false ;
     var  $extend  =   function (a, b) {  for ( var  c  in  b) { a[c]  =  b[c]; }  return  a; };
     var  forEach  =   function (array, callback, thisp) {
         if (array.forEach){ 
            array.forEach(callback, thisp);
        } else  {
             for ( var  i  =   0 , len  =  array.length; i  <  len; i ++ ) {
                 if (i  in  array) callback.call(thisp, array[i], i, array);
            }
        }
    };
     var  RevealTrans  =   function (cId, options) {
         this .cId  =  cId;
         this .timer  =   null ;
         this .curImg  =   null ;
         this .index  =   1 ;
        $extend( this ,  this .setOptions(options));
         this .init();
    };

    RevealTrans.prototype  =  {
        constructor: RevealTrans,
         //  初始化函数
        init:  function () {
             this .createStruct();
             this .bindEvents();
        },
         //  设置默认参数
        setOptions:  function (options) {
             this .options  =  {
                auto:  true ,             //  是否自动切换
                transition:  23 ,         //  滤镜参数(详见说明)
                duration:  1.5 ,         //  滤镜转换所用时间(单位为秒)
                minOpa:  40 ,             //  导航图片的初始透明度
                maxOpa:  100 ,         //  导航图片的最终透明度
                pause:  2000 ,         //  自动切换间隔时间
                coll: [],             //  图片集合
                onEnd:  function (){}  //  图片滤镜转换结束自定义函数
            };
             return  $extend( this .options, options  ||  {});
        },
         //  生成HTML结构
        createStruct:  function () {
             var  _html  =   '' , _this  =   this ;
            forEach( this .coll,  function (O) {
                _html  +=   ' <li><div><img src =  '   +  O  +   ' ></div></li> ' ;
            });
            $( this .cId).innerHTML  =  _html;
            $( ' context ' ).innerHTML  =   ' <img src= '   +   this .coll[ 0 ]  +   ' > ' ;
             this .bindEvents();

        },
         //  设置透明度
        setOpacity:  function (O, opacity) {
             if ( !! isIE) O.style.filter  =   " alpha(opacity= "   +  opacity  +   " ) " ;
             else  O.style.opacity  =  opacity  /   100 ;
        },
         //  绑定相关事件
        bindEvents:  function () {
             var  imgs  =  $( this .cId).getElementsByTagName( ' img ' ), _this  =   this ;
            forEach(imgs,  function (O, index) {
                index  >   0   ?  _this.setOpacity(O, _this.minOpa) : _this.curImg  =  O;
                O.onmouseover  =   function () {  this .style.cursor  =   ' pointer ' ; };
                O._index  =  index;
                O.onclick  =   function () { _this.onStart( this ); _this.index  =   this ._index;};
            });
             //  默认演示第一个图片
             this .onStart(imgs[ 0 ]);
        },
         //  开始滤镜切换
        onStart:  function (O) {
             var  _this  =   this , context  =  $( ' context ' ).getElementsByTagName( ' img ' )[ 0 ];
            _this.onStop();
            _this.setOpacity(_this.curImg, _this.minOpa);_this.setOpacity(O, _this.maxOpa); 
            _this.curImg  =  O;
             if (isIE) {
                context.style.filter  =   " revealTrans() " ;
                _this.transFx(context);                     
            }
            context.setAttribute( ' src ' , O.getAttribute( ' src ' ));    
             //  判断是否自动切换
             if ( !! this .auto) {
                 var  len  =   this .coll.length;
                _this.timer  =  setTimeout( function (){
                    _this.index  <  len  ?  _this.index ++  : _this.index  =   1 ;
                    _this.onStart($(_this.cId).getElementsByTagName( ' img ' )[_this.index  -   1 ]);
                },  this .pause);
            }
        },
         //  滤镜演示
        transFx:  function (O) {
             with (O.filters.revealTrans) {
                Transition  =  parseInt( this .transition,  10 ); Duration  =  parseFloat( this .duration); apply(); play();
            }
        },
         //  清除时间戳
        onStop:  function () {
            clearInterval( this .timer);
        }
    };

 

程序原理

图片切换

主要通过更改图片的链接.切换相应的图片. 如果设置了自动切换.就自动控制索引,如果达到最大值就重置为0.

透明度设置

这个也很简单.只要区别IE和其他浏览器的opacity设置方式就可以了.

setOpacity:  function (O, opacity) {
     if ( !! isIE) O.style.filter  =   " alpha(opacity= "   +  opacity  +   " ) " ;
     else  O.style.opacity  =  opacity  /   100 ;
},

 

滤镜设置

RevealTrans是IE下的滤镜.很可惜在FF等不支持滤镜的浏览器会失去效果.(如果需要跨浏览器的这种效果可以考虑flash或者模拟).

RevealTrans滤镜设置步骤:

1 .context.style.filter  =   " revealTrans() " ;  //  将图片filter属性设置为revealTrans();
2 .
with (O.filters.revealTrans) {
    Transition  =  parseInt( this .transition,  10 );   //  设置转换参数
    Duration  =  parseFloat( this .duration);         //  设置转换时间
    apply(); play();                              //  设置滤镜并执行
}

其中Transition参数说明如下:

transition  :　 可选项。整数值(Integer)。设置或检索转换所使用的方式。  0   :　 矩形收缩转换。 
1   :　 矩形扩张转换。 
2   :　 圆形收缩转换。 
3   :　 圆形扩张转换。 
4   :　 向上擦除。 
5   :　 向下擦除。 
6   :　 向右擦除。 
7   :　 向左擦除。 
8   :　 纵向百叶窗转换。 
9   :　 横向百叶窗转换。 
10   :　 国际象棋棋盘横向转换。 
11   :　 国际象棋棋盘纵向转换。 
12   :　 随机杂点干扰转换。 
13   :　 左右关门效果转换。 
14   :　 左右开门效果转换。 
15   :　 上下关门效果转换。 
16   :　 上下开门效果转换。 
17   :　 从右上角到左下角的锯齿边覆盖效果转换。 
18   :　 从右下角到左上角的锯齿边覆盖效果转换。 
19   :　 从左上角到右下角的锯齿边覆盖效果转换。 
20   :　 从左下角到右上角的锯齿边覆盖效果转换。 
21   :　 随机横线条转换。 
22   :　 随机竖线条转换。 
23   :　 随机使用上面可能的值转换 
 

共有24种滤镜.其中23比较特殊可以随机样式.这里我默认使用的就是随机的.大家也可以根据自己的爱好去设置.

Duration参数:

duration  :　 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒( 0.0000 )格式

 

使用说明

实例化对象.传入容器的ID.并设置默认属性.

默认属性有:

auto: true,   // 是否自动切换
transition: 23,  // 滤镜参数(详见说明)
duration: 1.5,  // 滤镜转换所用时间(单位为秒)
minOpa: 40,   // 导航图片的初始透明度
maxOpa: 100,  // 导航图片的最终透明度
pause: 2000,        // 自动切换间隔时间
coll: [],   // 图片集合
onEnd: function(){} // 图片滤镜转换结束自定义函数

new  RevealTrans( ' nav ' , 
                {coll:[
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_1.jpg ' , 
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_2.jpg ' , 
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_3.jpg ' , 
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_4.jpg ' ,
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_5.jpg ' , 
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_6.jpg ' ,
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_7.jpg ' ,
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_8.jpg ' , 
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_9.jpg ' , 
                         ' http://images.cnblogs.com/cnblogs_com/goodness2010/238089/o_10.jpg '
                ]}
            );

 

代码示例下载 

 

转载于:https://www.cnblogs.com/goodness2010/archive/2010/01/13/1646656.html