javascript多物体运动案例:多物体淡入淡出

javascript多物体运动案例:多物体淡入淡出

任务描述:

补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度。

效果图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
 
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>多个div淡入淡出</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: red;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }
 
    </style>
</head>
 
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
   
    <script type="text/javascript">
      //补充代码
 
    </script>
</body>
 
</html>

  

参考代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
aDiv = document.getElementsByTagName('div');
 
for (var i = 0; i < aDiv.length; i++) {
 
    aDiv[i].alpha = 30;
 
    aDiv[i].onmouseover = function () {
        startMove(this, 100);
    }
 
    aDiv[i].onmouseout = function () {
        startMove(this, 30);
    }
 
}
 
function startMove(obj, iTarget) {
 
    clearInterval(obj.timer);
 
    obj.timer = setInterval(function () {
 
        var speed = (iTarget - obj.alpha) / 6;
 
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 
        if (obj.alpha == iTarget) {
 
            clearInterval(obj.timer);
 
        } else {
            obj.alpha += speed;
            obj.style.filter = "alpha(opacity=" + obj.alpha + ')';
            obj.style.opacity = obj.alpha / 100;
        }
 
    }, 30)
 
}

  

  

posted @   请叫我二狗哥  阅读(179)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· Java轻量级代码工程
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战
点击右上角即可分享
微信分享提示