Javascript实现div层渐隐效果的方法

2019-11-20 12:23:13

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Javascript实现div层渐隐效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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>Test Alpha</title><style type="text/css">  #show {    background:#ffff66;    font-size:12px;    height:200px;    width:300px;    left:300px;    position:absolute;    text-align:center;    filter:alpha(opacity=0);  }</style></head><body onload={document.getElementById('show').style.opacity=0;}><div id="show"></div><button onclick=fun()>button</button></body><script>function fun(){  var div=document.getElementById('show');   div.style.opacity=1;   hidden(document.getElementById("show"),1,-0.01);}function hidden(o,i,s){  t=setInterval(function(){    i+=s;  o.style.opacity=i;  if(i<0)window.clearInterval(t);   },1);  };</script></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：jquery简单实现外部链接用新窗口打开的方法

下一篇：JQuery+CSS实现图片上放置按钮的方法