Maison > Article > interface Web > Javascript utilise un mouvement uniforme pour obtenir des effets de fondu entrant et sortant (code)
Javascript utilise un mouvement uniforme pour obtenir des effets de fondu entrant et sortant (code)
- 不言original
- 2018-08-31 10:19:491182parcourir
Le contenu de cet article concerne l'effet de fondu d'entrée et de sortie du mouvement uniforme JavaScript (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Principe
Lorsque nous effectuons des fondus entrants et sortants de p ou d'images, nous utilisons principalement le filtre de style de transparence : alpha(opacity:30) est compatible avec, par exemple, l'opacité : 0.3 est compatible Firefox Chrome.
La minuterie setInterval;clearInterval;
Lorsque l'opération js apparaît et disparaît en fondu, utilisez le formulaire suivant pour modifier l'op.style de transparence . filter="alpha(opacity:"+alpha+"");op.style.opacity=alpha/100;
Remarque : la transparence ne peut pas être jugée directement en js, nous utilisons alpha Les paramètres sont comparés et finalement appliqués à l'objet.
Réaliser un fondu entrant et sortant div
<!DOCTYPE html>
<html>
<head>
<title>div淡入淡出</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
/* ie */
filter: alpha(opacity:30);
/* chrome firefox */
opacity:0.3;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(100);
}
oDiv.onmouseout=function(){
startMove(30);
}
}
var timer=null;
var alpha=30;//透明度默认30
function startMove(iTarget){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(alpha<iTarget){
speed=5;
}else{
speed=-5;
}
if(alpha===iTarget){
clearInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter="alpha(opacity:"+alpha+")";
oDiv.style.opacity=alpha/100;
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>Réaliser un fondu entrant et sortant d'image
<!DOCTYPE html>
<html>
<head>
<title>图片淡入淡出</title>
<style>
#img1{
/* ie */
filter: alpha(opacity:30);
/* chrome firefox */
opacity: 0.3;
border: 1px solid #000;
}
</style>
<script>
window.onload=function(){
var oImg=document.getElementById("img1");
oImg.onmouseover=function(){
startMove(100);
}
oImg.onmouseout=function(){
startMove(30);
}
}
var timer=null;
var alpha=30;//透明度默认30
function startMove(iTarget){
var oImg=document.getElementById("img1");
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(alpha<iTarget){
speed=5;
}else{
speed=-5;
}
if(alpha===iTarget){
clearInterval(timer);
}else{
alpha+=speed;
oImg.style.filter="alpha(opacity:"+alpha+")";
oImg.style.opacity=alpha/100;
}
},30);
}
</script>
</head>
<body>
<img id="img1" src="img1.jpg" alt="">
</body>
</html>Recommandations associées :
uniforme javascript mouvement pour obtenir un effet de partage de colonne latérale (code)
js pour obtenir un fondu d'entrée et de sortie uniforme des images
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!