javascript淡入淡出效果代码实例

快乐打工仔 分类:实例代码

使用jQuery实现淡入淡出效果非常的简单,具体可以参与一下两篇文章:

(1).淡入效果可以参阅jQuery fadeIn()一章节。

(2).淡出效果可以参阅jQuery fadeOut()一章节。

下面就通过代码实例介绍一下如何使用原生javascript介绍一下如何实现此功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#demo div.box {
  float:left;
  width:31%;
  margin:0 1%;
}
#demo div.box h2{
  margin-bottom:10px;
}
#demo div.box h2 input{
  padding:5px 8px;
  font-size:14px;
  font-weight:bolder;
}
#demo div.box div {
  text-indent:10px;
  line-height:22px;
  border:2px solid #555;
  padding:0.5em;
  overflow:hidden;
}
</style>
<script>
window.onload = function () {
  var iBase = {
    Id: function (name) {
      return document.getElementById(name);
    },
    SetOpacity: function (ev, v) {
      ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
    }
  }
  function fadeIn(elem, speed, opacity) {
    speed = speed || 20;
    opacity = opacity || 100;
    elem.style.display = 'block';
    iBase.SetOpacity(elem, 0);
    var val = 0;
    (function () {
      iBase.SetOpacity(elem, val);
      val += 5;
      if (val <= opacity) {
        setTimeout(arguments.callee, speed)
      }
    })();
  }
 
  function fadeOut(elem, speed, opacity) {
    speed = speed || 20;
    opacity = opacity || 0;
    var val = 100;
    (function () {
      iBase.SetOpacity(elem, val);
      val -= 5;
      if (val >= opacity) {
        setTimeout(arguments.callee, speed);
      }
      else if (val < 0) {
        elem.style.display = "none";
      }
    })();
  }
  var btns = iBase.Id("demo").getElementsByTagName("input");
  btns[0].onclick = function () {
    fadeIn(iBase.Id("fadeIn"));
  }
  btns[1].onclick = function () {
    fadeOut(iBase.Id("fadeOut"), 40);
  }
  btns[2].onclick = function () {
    fadeOut(iBase.Id("fadeTo"), 20, 10);
  }
}
</script>
</head>
<body>
<div id="demo">
  <div class="box">
    <h2><input type="button" value="点击淡入"/></h2>
    <div id="fadeIn" style="display:none">
      <p>犀牛前端部落</p>
    </div>
  </div>
 
  <div class="box">
    <h2><input type="button" value="点击淡出"/></h2>
    <div id="fadeOut">
      <p>犀牛前端部落</p>
    </div>
  </div>
 
  <div class="box">
    <h2><input type="button" value="点击淡出至指定透明度"/></h2>
    <div id="fadeTo">
      <p>犀牛前端部落</p>
    </div>
  </div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload = function () {},当文档内容完全加载再去执行函数中的代码。

(2).var iBase = {

  Id: function (name) {

    return document.getElementById(name);

  },

  SetOpacity: function (ev, v) {

    ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;

  }

},封装了两个方法,第一个是功能是获取指定id元素对象。

第二个的功能是实现兼容所有浏览器的元素透明度设置。

(3).function fadeIn(elem, speed, opacity) {},实现元素的淡入效果,第一个参数规定要淡入的元素对象。

第二个参数规定淡入的速度(其实是定时器函数的时间间隔)。

第三个参数规定目标透明度值。

(4).speed = speed || 20,如果传递了speed参数,那么就采用传递的值,否则使用默认值20。

(5).opacity = opacity || 100,如果传递了opacity参数,那么就采用传递的值,否则使用默认的值100。

(6).elem.style.display = 'block',设置元素为显示状态。

(7).iBase.SetOpacity(elem, 0),然后先将透明度设置为0。

(8).var val = 0,声明一个变量并赋初值为0。

(9).(function () {})(),匿名自执行函数。

(10).iBase.SetOpacity(elem, val),设置元素的透明度。

(11).val += 5,val值加5。

(12).if (val <= opacity) {

  setTimeout(arguments.callee, speed)

},如果val值小于等于目标opacity值,那么递归调用匿名函数。

二.相关阅读:

(1).js设置透明度可以参阅兼容所有浏览器js设置元素透明度效果一章节。

(2).setTimeout()可以参阅setTimeout()一章节。

回复

我来回复
  • 暂无回复内容