WEB开发网
开发学院WEB开发ASP 图片切换(滤镜IE Only) 阅读

图片切换(滤镜IE Only)

 2010-01-14 10:44:55 来源:WEB开发网   
核心提示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln
<!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://www.cnblogs.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,
    // 初始化函数
    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);
    }
  };
 </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>



[文字说明]

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

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

滤镜设置:

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)格式

[代码使用]

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


其中第二项{}的设置可以对照我的setOptions的默认项进行自定义. 比如你不想自动切换则可以改为:

     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也很菜.目的就是通过实践能够积累自己的经验,慢慢进步.如果有不妥的和好的提议.希望大家指教.

Tags:图片 切换 滤镜

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接