Maison > interface Web > js tutoriel > le corps du texte

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

PHPz
Libérer: 2018-10-12 15:17:11
original
1586 Les gens l'ont consulté

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>
Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal