這篇文章主要介紹了Javascript實現div層漸隱效果的方法,涉及javascript操作頁面元素與樣式變化的相關技巧,需要的朋友可以參考下
本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
