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

任务描述：

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

效果图：

<!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>

　　

参考代码：

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)

}

　　

　　

javascript多物体运动案例：多物体淡入淡出的更多相关文章

  1. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  2. JS多物体运动案例：变宽、变高

    任务描述: 当鼠标移入"变宽"矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入"变高"矩形时,该矩形高度逐渐增加至400px ...

  3. JS-运动基础——案例应用：淡入淡出效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽

    介绍了那么多运动,這次一套代码实现所有运动 1.html代码和css代码,只是定义一个div <style> div{ width:200px; height:200px; margin: ...

  5. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  6. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  7. Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  8. JS多物体宽度运动案例

    任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...

  9. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

随机推荐

  1. 修改LiveChart的提示显示位置

    问题:修改LiveChart的提示显示位置 摘要:相信WPF开发者在用LiveCharts的时候会有遇到这个需求.就是产品要求折线图的提示要显示的正常点. 需求:如下图所示.原本显示是在下方并且没有小 ...

  2. 转 RabbitMQ 入门教程(PHP版) 使用rabbitmq-delayed-message-exchange插件实现延迟功能

    延迟任务应用场景 场景一:物联网系统经常会遇到向终端下发命令,如果命令一段时间没有应答,就需要设置成超时. 场景二:订单下单之后30分钟后,如果用户没有付钱,则系统自动取消订单. 场景三:过1分钟给新 ...

  3. 2020年的UWP（2）——In Process App Service

    最早的时候App Service被定义为一种后台服务,类似于极简版的Windows Service.App Service作为Background Task在宿主UWP APP中运行,向其他UWP A ...

  4. javaSE、javaEE、Android知识点总结

    曾今上学时候的一些学习总结,如有错误请大家指出,共同学习. 1. 什么是WebView? WebView是一个使用WebKit引擎的浏览器组件,用来加载网页. 2. WebView中加载网页的两种方式 ...

  5. Qt中的Q_OBJECT作用， 以及信号槽

    自定义类时, 如果需要使用Qt框架提供的信号槽机制, 必须满足以下两个条件: 第一:该类必须是QObject类的子类或者间接子类. 其次:在定义类时, 首行必须加上宏Q_OBJECT class My ...

  6. 阿里云ecs，rds，redis优惠套餐

    阿里云ECS优惠套餐 阿里云RDS优惠套餐 阿里云REDIS优惠套餐 阿里云REDIS集群版 阿里云短信资源包

  7. RAM ROM区别记忆

    我老是忘这个 1.概念 RAM即随机存储内存,这种存储器在断电时将丢失其存储内容,故主要用于存储短时间使用的程序.ROM即只读内存,是一种只能读出事先所存数据的固态半导体存储器. 2.对比 手机中的R ...

  8. 1.1：JAVA基础

    JAVA基础面试部分(多线程.算法.网络编程提出去了,详细分类见<面经>) 一.Java底层基础题 JDK和JRE区别? 1.JDK是整个JAVA的核心,包括了Java运行环境JRE,一堆 ...

  9. 【2】TensorFlow光速入门-数据预处理（得到数据集）

    本文地址:https://www.cnblogs.com/tujia/p/13862351.html 系列文章: [0]TensorFlow光速入门-序 [1]TensorFlow光速入门-tenso ...

  10. golang1.16内嵌静态资源指南

    今天是万圣节,也是golang1.16新特性冻结的日子.不得不说自从go2路线发布之后golang新特性的迭代速度也飞速提升,1.16中有相当多的重要更新,包括io标准库的重构,语言内置的静态资源嵌入 ...