
正文
JS实现简单的图片透明度循环变化(渐变)
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
找了好多,都是由100到0就结束了,到头来自己魔改,以下就是源码。
div中加入img,js添加函数,完事(调用),取名后面加个1是为了避免冲突
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>简单透明度渐变</title>
</head> <body>
<div id="img_eat" style="opacity:1;">
<img src="https://images.cnblogs.com/cnblogs_com/ikaros-521/1529977/o_eat.gif" id="eat" alt="" style="width: 100px;"/>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// 透明度来回变换
var timer1 = setInterval(colorLiner,20);
var val1 = 100;
function colorLiner(){
var Div = document.getElementById('img_eat');
if(val1 >= 0)
{
Div.style.opacity = val1/100;
}
if(val1 < 0)
{
Div.style.opacity = -val1/100;
}
if(val1 == -100)//由-100变为正100
{
val1 = -val1;
}
val1--;
}
}
</script>
</html>








