Der Inhalt dieses Artikels befasst sich mit dem Ein- und Ausblendeffekt der einheitlichen JavaScript-Bewegung. Ich hoffe, dass er für Sie hilfreich ist.
Beim Ein- und Ausblenden von Bildern oder Bildern verwenden wir hauptsächlich den Transparenzstilfilter: Alpha (Opazität: 30) ist kompatibel mit z. B. Opazität: 0.3 ist mit Firefox Chrome kompatibel.
Der Timer setInterval;clearInterval;
Wenn die js-Operation ein- und ausgeblendet wird, verwenden Sie das folgende Formular, um den Transparenz-Op.-Stil zu ändern . filter="alpha(opacity:"+alpha+")";op.style.opacity=alpha/100;
Hinweis: Transparenz kann nicht direkt in js beurteilt werden, wir verwenden Alpha Die Parameter werden verglichen und schließlich auf das Objekt angewendet.
<!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><!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>Verwandte Empfehlungen:
Gleichmäßige Javascript-Bewegung, um die Seitenleiste zu erreichen Sharing-Effekt (Code)
js, um das Ein- und Ausblenden von Bildern mit gleichmäßiger Geschwindigkeit zu implementieren
Verwenden Sie jQuery, um Implementieren Sie das Scrollen und Ein- und Ausblenden von Anzeigen
Das obige ist der detaillierte Inhalt vonJavascript verwendet gleichmäßige Bewegungen, um Ein- und Ausblendeffekte zu erzielen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
