js图片，文字渐变处理

最新推荐文章于 2022-10-24 17:44:32 发布

niketwo

最新推荐文章于 2022-10-24 17:44:32 发布

阅读量552

点赞数 1

分类专栏： js 文章标签： js html

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>图片透明度渐变</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
#oDiv{width:200px;height:200px;margin:0 auto}
</style>
<body>
<div id="oDiv" style="opacity:1;" ><img src="http://e.hiphotos.baidu.com/image/pic/item/10dfa9ec8a13632746cef23e938fa0ec08fac79f.jpg"/></div>
</body>
<script type="text/javascript">
window.onload = function(){
var timer = setInterval(colorLiner,20);
var val = 0;
function colorLiner(){
if(val <= 100){
var oDiv = document.getElementById('oDiv');
oDiv.style.opacity = val/100;
val++;
}else{
clearInterval(timer);
}
}
}
</script>
</html>