recherche

Maison >interface Web >js tutoriel >Méthode Javascript pour obtenir un effet de fondu de la couche div

Méthode Javascript pour obtenir un effet de fondu de la couche div

PHPz
PHPzoriginal
2016-05-16 15:57:201616parcourir

Cet article présente principalement la méthode Javascript pour obtenir l'effet de fondu de la couche P, impliquant des techniques liées à la manipulation JavaScript des éléments de page et aux changements de style. Les amis dans le besoin peuvent se référer à 

<!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>

pour en savoir plus. didacticiels associés Veuillez visiter le Tutoriel vidéo JavaScript

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js implémente la fonction de compte à rebours après l'envoi des compétences de vérification code_javascriptArticle suivant：js implémente la fonction de compte à rebours après l'envoi des compétences de vérification code_javascript

Articles Liés

Voir plus