588创业论坛

标题: 原生JS实现div渐渐显示和慢慢隐藏的淡出淡入效果 [打印本页]

---

作者: 匿名    时间: 2020-3-4 12:59
标题: 原生JS实现div渐渐显示和慢慢隐藏的淡出淡入效果
现在打击基本上都是使用jQuery来实现淡出淡入效果，不过总有人象小编这样比较喜欢使用原生的JS代码来实现前端效果，所以分享下面这个原生JS淡出淡入效果代码。

页面代码

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

复制代码

JS代码

1. 
   
2. function fadein(element,speed){
   
3.         var speed = speed || 30 ;
   
4.         var num = 0;
   
5.         var st = setInterval(function(){
   
6.         num++;
   
7.         element.style.opacity = num/50;
   
8.         if(num>=50)  {  clearInterval(st);  }
   
9.         },speed);
   
10. }
    
11. 
    
12. function xx(){
    
13.     document.getElementById("nogg").style.display="block";
    
14.     fadein(nogg,30);
    
15. }
    
16. 
    
17. 
    
18. 
    
19. function fadeout(element,speed){
    
20.        var speed = speed || 30 ;
    
21.         var num = 50;
    
22.         var st = setInterval(function(){
    
23.         num--;
    
24.         element.style.opacity = num / 50 ;
    
25.         if(num<=0)  {   clearInterval(st);  }
    
26.         },speed);
    
27. }
    
28. 
    
29. function ss(){
    
30. document.getElementById("noggs").style.display="block";
    
31. setTimeout("fadeout(noggs,30)",1000);
    
32. }
    
33. 
    

复制代码

---

作者: 匿名    时间: 2020-3-4 13:00
很好

---

欢迎光临 588创业论坛 (http://bbs.588cy.com/)

Powered by Discuz! X2.5