图片匀速淡入淡出效果（纯js）

最新推荐文章于 2024-03-30 20:40:58 发布

liugang0605

最新推荐文章于 2024-03-30 20:40:58 发布

阅读量704

点赞数

分类专栏： js 动画定时器文章标签： javascript 动画淡入淡出兼容性

本文链接：https://blog.csdn.net/power8988/article/details/77466644

版权

js 同时被 3 个专栏收录

113 篇文章 2 订阅

订阅专栏

动画

10 篇文章 0 订阅

订阅专栏

定时器

5 篇文章 0 订阅

订阅专栏

图片匀速淡入淡出效果如下：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            border: 2px solid #aaa;
        }
        img {
            width: 300px;
            height: 300px;
            filter: alpha(opacity:30);
            opacity: .3;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div>
    <img src="img/timg.jpg" alt="" id="img">
</div>
<script>
    var alpha=30;
    var img = document.getElementById("img");
    img.onmouseover=function(){
        startMove(100)
    };
    img.onmouseout=function(){
        startMove(30)
    }
    var timer;
    function startMove(tar) {
        var img = document.getElementById("img");
        clearInterval(timer);
        timer = setInterval(function () {
            var ispeed=0;
            ispeed= alpha<tar?5:-5;
            if(alpha==tar){
                clearInterval(timer)
            }
            else{
                alpha+=ispeed;
                img.style.filter="alpha(opacity:"+alpha+")";
                img.style.opacity=alpha/100;
            }
        }, 30)
    }
</script>
</body>
</html>

liugang0605

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片匀速淡入淡出效果（纯js）

图片匀速淡入淡出效果如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } div {
复制链接

扫一扫