图片切换(滤镜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'
                ]}
            );

 

代码示例下载