（简单实现）JS CSS实现图片加载后慢慢淡出有具体代码

Moukk

于 2018-12-29 17:52:13 发布

阅读量2.5k

点赞数 3

文章标签： js css 图片淡出自动淡出

本文链接：https://blog.youkuaiyun.com/weixin_43134135/article/details/85342476

版权

本文介绍了一种使用HTML、CSS和JavaScript实现图片透明度动态调整的方法，通过鼠标悬停事件触发图片透明度的平滑变化，增强了网页的交互性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>这个标题会变</title>
    <style type="text/css">
        #img1{opacity: 100; }　　　    　　　　　 /*设置图片的透明度*/
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oImg = document.getElementById("img1");
            var alpha = 100;                //用一个变量存储当前透明度 
            oImg.onmouseover = function(){
                startMove(0);            //鼠标移入时开启函数 startMove(目标透明度)
            }
            function startMove(iTarget){    
            var timer = null;
            clearInterval(timer);　　　　//在开启一个定时器之前，先关闭已经开起的定时器
            timer = setInterval(function(){
                var speed = -1;                //设置透明度变化的速度
                if(alpha==iTarget){
                    return ;
                }else{
                    alpha+=speed;       //开始计算 递减
                    oImg.style.opacity = alpha/100; //这里 将递减结果alpha 赋给页面的透明度 显示出来
                    document.title = alpha;        //主要是为了测试，在标题上显示透明度
                }
            },30);
            }
        };
    </script>
</head>
<body>
    <img id="img1" src="image/library.jpg" >
</body>
</html>