Cette fois, je vais vous présenter l'implémentation js des imagesfondu entrant et sortant à une vitesse constante. Quelles sont les précautionspour implémenter l'image en js et le fondu entrant. et dehors à une vitesse uniforme. Ce qui suit est un cas pratique. Jetons un coup d'oeil.
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>淡入效果</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
border: 2px solid #aaa;
}
img {
width: 300px;
height: 300px;
filter: alpha(opacity:30);
opacity: .3;
margin: 0 auto;
}
</style>
</head>
<body>
<p>
<imgsrc="img/timg.jpg"alt=""id="img">
</p>
<script>
var alpha=30;
var img = document.getElementById("img");
img.onmouseover=function(){
startMove(100)
};
img.onmouseout=function(){
startMove(30)
}
var timer;
function startMove(tar) {
var img = document.getElementById("img");
clearInterval(timer);
timer = setInterval(function () {
var ispeed=0;
ispeed= alpha<tar?5:-5;
if(alpha==tar){
clearInterval(timer)
}
else{
alpha+=ispeed;
img.style.filter="alpha(opacity:"+alpha+")";
img.style.opacity=alpha/100;
}
}, 30)
}
</script>
</body>
</html>Copier après la connexion |
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
