588创业论坛

 找回密码
 快速注册
搜索
查看: 598|回复: 1

原生JS实现div渐渐显示和慢慢隐藏的淡出淡入效果

[复制链接]
匿名
匿名  发表于 2020-3-4 12:59:21
现在打击基本上都是使用jQuery来实现淡出淡入效果,不过总有人象小编这样比较喜欢使用原生的JS代码来实现前端效果,所以分享下面这个原生JS淡出淡入效果代码。

页面代码

  1. <div style="width:200px; height:30px; line-height:30px; background-color: #FF9900; text-align:center; color:#FFFFFF;" onclick="xx()">显示</div>
  2. <div style="width:200px; height:30px; line-height:30px; background-color: #FF9900; text-align:center; color:#FFFFFF;" onclick="ss()">隐藏</div>
  3. <div id="nogg" style="width:200px; height:200px; line-height:200px; background-color:#666666; display:none; color:#FFFFFF;">广告层1</div>
  4. <div id="noggs" style="width:200px; height:200px; line-height:200px; background-color:#666666; display:none; color:#FFFFFF;">广告层2</div>
复制代码
JS代码

  1. function fadein(element,speed){
  2.         var speed = speed || 30 ;
  3.         var num = 0;
  4.         var st = setInterval(function(){
  5.         num++;
  6.         element.style.opacity = num/50;
  7.         if(num>=50)  {  clearInterval(st);  }
  8.         },speed);
  9. }

  10. function xx(){
  11.     document.getElementById("nogg").style.display="block";
  12.     fadein(nogg,30);
  13. }



  14. function fadeout(element,speed){
  15.        var speed = speed || 30 ;
  16.         var num = 50;
  17.         var st = setInterval(function(){
  18.         num--;
  19.         element.style.opacity = num / 50 ;
  20.         if(num<=0)  {   clearInterval(st);  }
  21.         },speed);
  22. }

  23. function ss(){
  24. document.getElementById("noggs").style.display="block";
  25. setTimeout("fadeout(noggs,30)",1000);
  26. }

复制代码
匿名
匿名  发表于 2020-3-4 13:00:01
很好
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 快速注册

Archiver|手机版|588创业网 ( 闽ICP备08003622号-6 )

GMT+8, 2024-3-29 03:00 , Processed in 0.118320 second(s), 31 queries .

Powered by bbs.588cy.com

© 2001-2012 Discuz! X2.5

回顶部