圖片切換(濾鏡IE Only)

2019-11-17 03:52:40

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> RevealTrans </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    body{background-color: #CCCCCC;}
    #container {width: 525px;text-align: center;margin: 0 auto;}
    #context {background-color: #777777;border: 2px solid #555555;width: 500px;}
    #context img {border: none;margin: 0px;}
    #nav {width: 510px;height: 140px;overflow: hidden;list-style: none;margin-top: 3px;position: relative;    padding-left: 0px; margin-left:3px}
    #nav li {float: left; margin: 0 7px 4px 0;border: 2px solid #555;}
    #nav div {width: 90px;height: 60px; overflow: hidden;}
    #nav div img {width: 95px;height: 60px;}
  </style>
  <script>
    /*!
     *    RevealTrans
     *    http://m.survivalescaperooms.com/goodness2010/
     *
     *  Copyright (c) 2009 GoodNess2010
     *  Date: 2009-1-13 (星期三)
     */
    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,
        // 初始化函數(shù)
        init: function() {
            this.createStruct();
            this.bindEvents();
        },
        // 設(shè)置默認(rèn)參數(shù)
        setOptions: function(options) {
            this.options = {
                auto: true,            // 是否自動(dòng)切換
                transition: 23,        // 濾鏡參數(shù)(詳見說(shuō)明)
                duration: 1.5,         // 濾鏡轉(zhuǎn)換所用時(shí)間(單位為秒)
                minOpa: 40,            // 導(dǎo)航圖片的初始透明度
                maxOpa: 100,           // 導(dǎo)航圖片的最終透明度
                pause: 2000,           // 自動(dòng)切換間隔時(shí)間
                coll: [],              // 圖片集合
                onEnd: function(){}    // 圖片濾鏡轉(zhuǎn)換結(jié)束自定義函數(shù)
            };
            return $extend(this.options, options || {});
        },
        // 生成HTML結(jié)構(gòu)
        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();
        },
        // 設(shè)置透明度
        setOpacity: function(O, opacity) {
            if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
            else O.style.opacity = opacity / 100;
        },
        // 綁定相關(guān)事件
        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;};
            });
            // 默認(rèn)演示第一個(gè)圖片
            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'));
            // 判斷是否自動(dòng)切換
            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();
            }
        },
        // 清除時(shí)間戳
        onStop: function() {
            clearInterval(this.timer);
        }
    };
  </script>
</head>

<body>
      <div id="container">
          <div id="context"></div>
          <ul id="nav"></ul>
     </div>
    <script>
        var revealTrans = new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});
    </script>
</body>
</html>

[文字說(shuō)明]

圖片切換:主要通過(guò)更改圖片的鏈接.切換相應(yīng)的圖片. 如果設(shè)置了自動(dòng)切換.就自動(dòng)控制索引,如果達(dá)到最大值就重置為0.

透明度設(shè)置: 這個(gè)也很簡(jiǎn)單.只要區(qū)別IE和其他瀏覽器的opacity就可以了.

濾鏡設(shè)置:

RevealTrans是IE下的濾鏡.很可惜在FF等不支持濾鏡的瀏覽器會(huì)失去效果.(如果需要跨瀏覽器的這種效果可以考慮Flash).

RevealTrans濾鏡設(shè)置步驟:

1.context.style.filter = "revealTrans()"; // 將圖片filter屬性設(shè)置為revealTrans();
2.
with(O.filters.revealTrans) {
    Transition = parseInt(this.transition, 10);  // 設(shè)置轉(zhuǎn)換參數(shù)
    Duration = parseFloat(this.duration);        // 設(shè)置轉(zhuǎn)換時(shí)間
    apply(); play();                             // 設(shè)置濾鏡并執(zhí)行
}

其中Transition參數(shù)說(shuō)明如下:

transition  :　可選項(xiàng)。整數(shù)值(Integer)。設(shè)置或檢索轉(zhuǎn)換所使用的方式。 0  :　矩形收縮轉(zhuǎn)換。
1  :　矩形擴(kuò)張轉(zhuǎn)換。
2  :　圓形收縮轉(zhuǎn)換。
3  :　圓形擴(kuò)張轉(zhuǎn)換。
4  :　向上擦除。
5  :　向下擦除。
6  :　向右擦除。
7  :　向左擦除。
8  :　縱向百葉窗轉(zhuǎn)換。
9  :　橫向百葉窗轉(zhuǎn)換。
10  :　國(guó)際象棋棋盤橫向轉(zhuǎn)換。
11  :　國(guó)際象棋棋盤縱向轉(zhuǎn)換。
12  :　隨機(jī)雜點(diǎn)干擾轉(zhuǎn)換。
13  :　左右關(guān)門效果轉(zhuǎn)換。
14  :　左右開門效果轉(zhuǎn)換。
15  :　上下關(guān)門效果轉(zhuǎn)換。
16  :　上下開門效果轉(zhuǎn)換。
17  :　從右上角到左下角的鋸齒邊覆蓋效果轉(zhuǎn)換。
18  :　從右下角到左上角的鋸齒邊覆蓋效果轉(zhuǎn)換。
19  :　從左上角到右下角的鋸齒邊覆蓋效果轉(zhuǎn)換。
20  :　從左下角到右上角的鋸齒邊覆蓋效果轉(zhuǎn)換。
21  :　隨機(jī)橫線條轉(zhuǎn)換。
22  :　隨機(jī)豎線條轉(zhuǎn)換。
23  :　隨機(jī)使用上面可能的值轉(zhuǎn)換

共有24種濾鏡.其中23比較特殊可以隨機(jī)樣式.這里我默認(rèn)使用的就是隨機(jī)的.大家也可以根據(jù)自己的愛好去設(shè)置.

Duration參數(shù):

duration  :　可選項(xiàng)。浮點(diǎn)數(shù)(Real)。設(shè)置或檢索轉(zhuǎn)換完成所用的時(shí)間。其值為秒.毫秒(0.0000)格式

[代碼使用]

new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});

其中第二項(xiàng){}的設(shè)置可以對(duì)照我的setOptions的默認(rèn)項(xiàng)進(jìn)行自定義. 比如你不想自動(dòng)切換則可以改為:

         new RevealTrans('nav', {
                                    coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'],
                                    auto: false
                                });
源碼下載

自己的能力很有限.CSS也很菜.目的就是通過(guò)實(shí)踐能夠積累自己的經(jīng)驗(yàn),慢慢進(jìn)步.如果有不妥的和好的提議.希望大家指教.

上一篇：【翻譯】學(xué)習(xí)和使用web標(biāo)準(zhǔn)的十大理由

下一篇：個(gè)人電腦搭建版本控制平臺(tái)的最簡(jiǎn)單方法