使用原生js实现淡入淡出效果实例

2015-5-15 Jon js+jquery+ajax

淡入淡出效果，一般使用jquery很方便实现实现，如下

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <title>使用jquery实现淡入淡出</title>
      <style>
          body {padding:10px 200px;color:#777; background:#222}
          button {border:1px solid #eee; background:#ccc;border-radius:3px;width:145px;color:#555;line-height: 25px;cursor: pointer;}
          button:hover {border:1px solid #fff; background:#d9d9d9; color:#333;}
          #fade {display: none; border-radius:3px;margin-top:10px;padding:10px; border:1px solid #548954; background:#355c33; color:#aaa; text-shadow:1px 1px #21341d;line-height: 35px;text-align: center;transition: 300ms;}
          #fade:hover{color:#eee;}
      </style>
      <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  </head>
  <body>
      <button id="fadein">Fade In</button>
      <button id="fadeout">Fade Out</button>
      <div id="fade">
        写信告诉我今天 海是什么颜色<br>
        夜夜陪着你的海 心情又如何<br>
        灰色是不想说 蓝色是忧郁<br>
        而漂泊的你 狂浪的心 停在哪里<br>
        写信告诉我今夜<br>
        你想要梦什么 梦里外的我是否<br>
        都让你无从选择  我揪着一颗心<br>
        整夜都闭不了眼睛 为何你明明动了情<br>
        却又不靠近 听 海哭的声音<br>
        叹惜着谁又被伤了心 却还不清醒<br>
        一定不是我  至少我很冷静 可是泪水<br>
        就连泪水 也都不相信  听海哭的声音<br>
        这片海未免也太多情 悲泣到天明<br>
        写封信给我  就当最后约定<br>
        说你在离开我的时候 是怎样的心情<br>
        写信告诉我今夜 你想要梦什么<br>
        梦里外的我是否 都让你无从选择<br>
        我揪着一颗心  整夜都闭不了眼睛<br>
        为何你明明动了情  却又不靠近<br>
        听 海哭的声音 叹惜着谁又被伤了心<br>
        却还不清醒 一定不是我<br>
        至少我很冷静  可是泪水<br>
        就连泪水也都不相信 听海哭的声音<br>
        这片海未免也太多情  悲泣到天明<br>
        写封信给我 就当最后约定<br>
        说你在离开我的时候 是怎样的心情
      </div>
      <script>
        $(function(){
          var oFade=$('#fade');
          $('#fadein').click(function(){
            oFade.fadeIn('2000');
          });
          $('#fadeout').click(function(){
            oFade.fadeOut('2000');
          });
        });
      </script>
  </body>
  </html>

您可以修改框中代码后运行查看

但是如果只是实现一个小小的功能，也要引入jquery，那就小题大做了，看看原生js怎么实现淡入淡出的效果的

  <!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title>js代码控制元素简单的淡入淡出效果</title>
  <style>
    body {padding:50px 200px;color:#777; background:#222}
    button {border:1px solid #eee; background:#ccc;border-radius:3px;width:145px;color:#555;line-height: 25px;}
    button:hover {border:1px solid #fff; background:#d9d9d9; color:#333}
    #fade {opacity:0; filter:alpha(opacity='0');border-radius:3px;margin-top:10px;padding:10px; border:1px solid #548954; background:#355c33; color:#aaa; text-shadow:1px 1px #21341d;line-height: 35px;text-align: center;transition: 300ms;}
    #fade:hover{color:#eee;}
  </style>
  </head>
  <body>
  <div id="wrap">
    <button onclick="fadeEffect.init('fade', 1)">Fade In</button>
    <button onclick="fadeEffect.init('fade', 0)">Fade Out</button>
    <div id="fade">
      闭上眼看见天堂<br>
      那是藏着你笑的地方<br>
      我躲开无数个猎人的枪<br>
      赶走坟墓爬出的忧伤<br>
      为了你,我变成狼人摸样<br>
      为了你,染上了疯狂<br>
      为了你,穿上厚厚的伪装<br>
      为了你,换了心肠<br>
      我们还能不能再见面<br>
      我在佛前苦苦求了几千年<br>
      愿意用几世换我们一世情缘<br>
      希望可以感动上天
    </div>
    <script>
      var fadeEffect=function(){
        return{
          init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.si = setInterval(function(){fadeEffect.tween()}, 20);
          },
          tween:function(){
            if(this.alpha == this.target){
              clearInterval(this.si);
            }else{
              var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
              this.elem.style.opacity = value / 100;
              this.elem.style.filter = 'alpha(opacity=' + value + ')';
              this.alpha = value
            }
          }
        }
      }();
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

下面也是使用js实现，并将其封装成了函数，直接调用即可

     <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8" />
          <title>js封装淡入淡出效果实例</title>
          <style>
              body {padding:10px 200px;color:#777; background:#222}
              button {border:1px solid #eee; background:#ccc;border-radius:3px;width:145px;color:#555;line-height: 25px;}
              button:hover {border:1px solid #fff; background:#d9d9d9; color:#333}
              #fade {opacity:0; filter:alpha(opacity='0');border-radius:3px;margin-top:10px;padding:10px; border:1px solid #548954; background:#355c33; color:#aaa; text-shadow:1px 1px #21341d;line-height: 35px;text-align: center;transition: 300ms;}
              #fade:hover{color:#eee;}
          </style>
          <script>
              var iBase = {
                Id: function(name){
                    return document.getElementById(name);
                },
                //设置元素透明度,透明度值按IE规则计,即0~100
                SetOpacity: function(ev, v){
                    ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
                }
              }
              //淡入效果(含淡入到指定透明度)
              function fadeIn(elem, speed, opacity){
              /*
                * 参数说明
                * elem==>需要淡入的元素
                * speed==>淡入速度,正整数(可选)
                * opacity==>淡入到指定的透明度,0~100(可选)
                */
                  speed = speed || 20;
                  opacity = opacity || 100;
              //显示元素,并将元素值为0透明度(不可见)
                  elem.style.display = 'block';
                  iBase.SetOpacity(elem, 0);
              //初始化透明度变化值为0
                  var val = 0;
              //循环将透明值以5递增,即淡入效果
                  (function(){
                      iBase.SetOpacity(elem, val);
                      val += 5;
                      if (val <= opacity) {
                          setTimeout(arguments.callee, speed)
                      }
                  })();
              }
              //淡出效果(含淡出到指定透明度)
              function fadeOut(elem, speed, opacity){
              /*
                * 参数说明
                * elem==>需要淡入的元素
                * speed==>淡入速度,正整数(可选)
                * opacity==>淡入到指定的透明度,0~100(可选)
                */
                  speed = speed || 20;
                  opacity = opacity || 0;
                  //初始化透明度变化值为100
                  var val = 100;
              //循环将透明值以5递减,即淡出效果
                  (function(){
                      iBase.SetOpacity(elem, val);
                      val -= 5;
                      if (val >= opacity) {
                          setTimeout(arguments.callee, speed);
                      }else if (val < 0) {
                      //元素透明度为0后隐藏元素
                          elem.style.display = 'none';
                      }
                  })();
              }
          </script>
      </head>
      <body>
          <button id="fadein">Fade In</button>
          <button id="fadeout">Fade Out</button>
          <div id="fade">
            如果骄傲没被现实大海冷冷拍下<br>
            又怎会懂得要多努力<br>
            才走得到远方<br>
            如果梦想不曾坠落悬崖<br>
            千钧一发<br>
            又怎会晓得执着的人<br>
            有隐形翅牓<br>
            把眼泪装在心上<br>
            会开出勇敢的花<br>
            可以在疲惫的时光<br>
            闭上眼睛闻到一种芬芳<br>
            就像好好睡了一夜直到天亮<br>
            又能边走着边哼着歌<br>
            用轻快的步伐<br>
            沮丧时总会明显感到孤独的重量<br>
            多渴望懂得的人给些温暖借个肩膀<br>
            很高兴一路上我们的默契那么长<br>
            穿过风又绕个弯心还连着<br>
            像往常一样<br>
            最初的梦想紧握在手上<br>
            最想要去的地方<br>
            怎么能在半路就放<br>
            最初的梦想绝对会到达<br>
            实现了真的渴望<br>
            才能够算到过了天堂<br>
            绝对会到达
          </div>
          <script>
              var fade=document.getElementById('fade');
              var fadein=document.getElementById('fadein');
              var fadeout=document.getElementById('fadeout');
              fadein.onclick=function(){
                fadeIn(fade,20,100);
              };
              fadeout.onclick=function(){
                fadeOut(fade,20,0);
              };
          </script>
      </body>
      </html>

您可以修改框中代码后运行查看

下面写一个完整的案例，返回顶部的按钮

      <!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>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>js平滑返回顶部效果、淡入淡出</title>
      <style>
      body{padding:20px 200px;background: #555;color:#eee;text-align: center;line-height: 40px;}
      #up {
          width: 54px;
          height: 54px;
          background: url(https://yuanqiao.pw/content/templates/default/images/to_top.gif) no-repeat 0 0;
          filter: alpha(Opacity=0);
          -moz-opacity: 0;
          opacity: 0;
          position: fixed;
          bottom: 80px;
          right: 30px;
          cursor: pointer;
          display: none;
      }
      #up:hover {
          filter: alpha(Opacity=100) !important;
          -moz-opacity: 1 !important;
          opacity: 1 !important;
      }
      </style>
  </head>
  <body>
      <div style="height:3000px;">
          苦涩的沙　吹痛脸庞的感觉<br />
          像父亲的责骂　母亲的哭泣<br />
          永远难忘记<br />
          年少的我　喜欢一个人在海边<br />
          卷起裤管光着脚丫踩在沙滩上<br />
          总是幻想海洋的尽头有另一个世界<br />
          总是以为勇敢的水手是真正的男儿<br />
          总是一副弱不禁风孬种的样子<br />
          在受人欺负的时候总是听见水手说<br />
          他说风雨中这点痛算什么<br />
          擦干泪不要怕　至少我们还有梦<br />
          他说风雨中这点痛算什么<br />
          擦干泪不要问　为什么<br />
          长大以后　为了理想而努力<br />
          渐渐的忽略了　父亲母亲和<br />
          故乡的消息<br />
          如今的我　生活就像在演戏<br />
          说着言不由衷的话戴着伪善的面具<br />
          总是拿着微不足道的成就来骗自己<br />
          总是莫名其妙感到一阵的空虚<br />
          总是靠一点酒精的麻醉才能够睡去<br />
          在半睡半醒之间仿佛又听见水手说<br />
          他说风雨中这点痛算什么<br />
          擦干泪不要怕　至少我们还有梦<br />
          他说风雨中这点痛算什么<br />
          擦干泪不要问　为什么<br />
          <br>
              <music></music>
          </br>
          寻寻觅觅寻不到　活着的证据<br />
          都市的柏油路太硬　踩不出足迹<br />
          骄傲无知的现代人　不知道珍惜<br />
          那一片被文明糟踏过的海洋和天地<br />
          只有远离人群才能找回我自己<br />
          在带着咸味的空气中自由的呼吸<br />
          耳畔又传来汽笛声和水手的笑语<br />
          永远在内心的最深处听见水手说<br />
          他说风雨中这点痛算什么<br />
          擦干泪不要怕　至少我们还有梦<br />
          他说风雨中这点痛算什么<br />
          擦干泪不要问　为什么
      </div>
      <script>
          var fadeEffect=function(){
            return{
              init:function(id, flag, target){
                this.elem = document.getElementById(id);
                clearInterval(this.elem.si);
                this.target = target ? target : flag ? 60 : 0;
                this.flag = flag || -1;
                this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
                this.si = setInterval(function(){fadeEffect.tween()}, 60);
              },
              tween:function(){
                if(this.alpha == this.target){
                  clearInterval(this.si);
                }else{
                  var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                  this.elem.style.opacity = value / 100;
                  this.elem.style.filter = 'alpha(opacity=' + value + ')';
                  this.alpha = value
                }
              }
            }
          }();
          (function(){
              var oBody=document.getElementsByTagName('body')[0];
              var oUp = document.createElement("div");
              oUp.setAttribute("id","up");
              oBody.appendChild(oUp);
              oUp.style.display='none';
              window.onscroll = function(){
                  var t = document.documentElement.scrollTop || document.body.scrollTop;
                  if( t >= 300 ) {
                    if(oUp.style.display=='none'){
                      oUp.style.display='block';
                      fadeEffect.init("up", 1);
                    }
                  } else {
                    if(oUp.style.display=='block'){
                      fadeEffect.init("up", 0);
                      oUp.style.display='none';
                    }
                  }
              }
              var currentPosition,timer;
              oUp.onclick=function(){
                  timer=setInterval(toTop,6);
              };
              function toTop(){
                  currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
                  currentPosition-=50;
                  if(currentPosition>0){
                      window.scrollTo(0,currentPosition);
                  }else{
                      window.scrollTo(0,0);
                      clearInterval(timer);
                  }
              }
          })();
      </script>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: js淡入淡出

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇三大运营商提速降费方案:谁在跟总理耍心眼
上一篇天涯16年一位离职老员工的讲述

发表评论：

知向前端

使用原生js实现淡入淡出效果实例

淡入淡出效果，一般使用jquery很方便实现实现，如下

但是如果只是实现一个小小的功能，也要引入jquery，那就小题大做了，看看原生js怎么实现淡入淡出的效果的

下面也是使用js实现，并将其封装成了函数，直接调用即可

下面写一个完整的案例，返回顶部的按钮

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档