search

Home >Web Front-end >JS Tutorial >Javascript method to achieve fade-out effect of div layer

Javascript method to achieve fade-out effect of div layer

PHPz
PHPzOriginal
2016-05-16 15:57:201631browse

This article mainly introduces the method of Javascript to achieve the p-layer fade effect, involving techniques related to JavaScript manipulation of page elements and style changes. Friends in need can refer to 

<!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(&#39;show&#39;).style.opacity=0;}>
<p id="show"></p>
<button onclick=fun()>button</button>
</body>
<script>
function fun(){
  var p=document.getElementById(&#39;show&#39;);
   p.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>

for more related tutorials Please visit JavaScript Video Tutorial

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js implements countdown function after sending verification code_javascript skillsNext article：js implements countdown function after sending verification code_javascript skills

Related articles

See more