滑鼠懸浮元素上下滑動增加或者減少高度效果

antzone發表於2017-04-06

本章節分享一段程式碼例項，它實現了滑鼠懸浮於元素之上，能夠以動畫上下滑動的方式設定元素的高度。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<style type="text/css">
#idGlideView{
  height:314px;
  width:325px;
  margin:0 auto;
}
#idGlideView div{
  width:325px;
  height:314px;
}
</style>
<script type="text/javascript">
var $$ = function(id) {
  return "string" == typeof id ? document.getElementById(id) : id;
};

function Event(e) {
  var oEvent = document.all ? window.event : e;
  if (document.all) {
    if (oEvent.type == "mouseout") {
      oEvent.relatedTarget = oEvent.toElement;
    } else if (oEvent.type == "mouseover") {
      oEvent.relatedTarget = oEvent.fromElement;
    }
  }
  return oEvent;
}

function addEventHandler(oTarget, sEventType, fnHandler) {
  if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);
  } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);
  } else {
    oTarget["on" + sEventType] = fnHandler;
  }
};
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}


var GlideView = Class.create();
GlideView.prototype = {
  //容器物件 容器寬度 展示標籤 展示寬度
  initialize: function(obj, iHeight, sTag, iMaxHeight, options) {
    var oContainer = $$(obj),
      oThis = this,
      len = 0;
    this.SetOptions(options);
    this.Step = Math.abs(this.options.Step);
    this.Time = Math.abs(this.options.Time);
    this._list = oContainer.getElementsByTagName(sTag);
    len = this._list.length;
    this._count = len;
    this._height = parseInt(iHeight / len);
    this._height_max = parseInt(iMaxHeight);
    this._height_min = parseInt((iHeight - this._height_max) / (len - 1));
    this._timer = null;
    this.Each(function(oList, oText, i) {
        oList._target = this._height * i; //自定義一個屬性放目標left
        oList.style.top = oList._target + "px";
        oList.style.position = "absolute";
        addEventHandler(oList, "mouseover", function() {
          oThis.Set.call(oThis, i);
        });
      })
      //容器樣式設定
    oContainer.style.height = iHeight + "px";
    oContainer.style.overflow = "hidden";
    oContainer.style.position = "relative";
    //移出容器時返回預設狀態
    addEventHandler(oContainer, "mouseout", function(e) {
      //變通防止執行oList的mouseout
      var o = Event(e).relatedTarget;
      if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);
    })
  },
  //設定預設屬性
  SetOptions: function(options) {
    this.options = { //預設值
      Step: 20, //滑動變化率
      Time: 3, //滑動延時
      TextTag: "", //說明容器tag
      TextHeight: 0 //說明容器高度
    };
    Object.extend(this.options, options || {});
  },
  //相關設定
  Set: function(index) {
    if (index < 0) {
      //滑鼠移出容器返回預設狀態
      this.Each(function(oList, oText, i) {
        oList._target = this._height * i;
        if (oText) {
          oText._target = this._height_text;
        }
      })
    } else {
      //滑鼠移到某個滑動物件上
      this.Each(function(oList, oText, i) {
        oList._target = (i <= index) ? this._height_min * i : this._height_min * (i - 1) + this._height_max;
        if (oText) {
          oText._target = (i == index) ? 0 : this._height_text;
        }
      })
    }
    this.Move();
  },
  //移動
  Move: function() {
    clearTimeout(this._timer);
    var bFinish = true; //是否全部到達目標地址
    this.Each(function(oList, oText, i) {
        var iNow = parseInt(oList.style.top),
          iStep = this.GetStep(oList._target, iNow);
        if (iStep != 0) {
          bFinish = false;
          oList.style.top = (iNow + iStep) + "px";
        }
      })
      //未到達目標繼續移動
    if (!bFinish) {
      var oThis = this;
      this._timer = setTimeout(function() {
        oThis.Move();
      }, this.Time);
    }
  },
  //獲取步長
  GetStep: function(iTarget, iNow) {
    var iStep = (iTarget - iNow) / this.Step;
    if (iStep == 0) return 0;
    if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
    return iStep;
  },
  Each: function(fun) {
    for (var i = 0; i < this._count; i++)
      fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i);
  }
};
window.onload = function() {
  var gv = new GlideView("idGlideView", 314, "div", 280, "");
}
</script>
</head>
<body>
<div id="idGlideView">
  <div style="background-color:#006699;">滑鼠懸浮測試效果</div>
  <div style="background-color:#FF9933;">滑鼠懸浮測試效果</div>
</div>
</body>
</html>

相關文章