原生的JS写图片的淡入淡出代码量比较多,他不像jQuery。
淡入淡出其实就是鼠标移入图片的时候透明度值的变化。
这里需要用到两个时间:
mouseover()和mouseout()
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #img1{ filter: alpha(opacity = 30); opacity: 0.3; } </style> </head> <body> <script> window.onload = function(){ var oimg = document.getElementById("img1"); oimg.onmouseover = function(){ //鼠标移入,透明度为100 startMove(100); } oimg.onmouseout = function(){ //alert("a"); //鼠标移出,回复原始值 startMove(30); } }; var timer = null; //刚开始的透明度为30 var alpha = 30; function startMove( iTarget ){ var oimg = document.getElementById("img1"); //再开定时器之前,先清除定时器 clearInterval( timer ); timer = setInterval( function(){ //定义初速度为0 var iSpeed = 0; if( alpha < iTarget ) //如果初始的透明度小于目标的透明度,速度加1 { iSpeed = 1; } else { iSpeed =-1; } if( alpha == iTarget ){ clearInterval( timer ); } else{ alpha += iSpeed; //IE浏览器的 oimg.style.filter = "alpha(opacity:"+alpha+")"; //谷歌,火狐 oimg.style.opacity = alpha/100; //document.title = alpha; } }, 30); } </script> <img id="img1" src="Desert.jpg" alt="淡入淡出"> </body> </html>
需要注意的是,透明度有兼容性问题。
filter: alpha(opacity = 30); IE浏览器
opacity: 0.3; 主流浏览器