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

任务描述：

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

效果图：

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

　　

参考代码：

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

　　

　　

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. 第3天 | 12天搞定Python，用PyCharm编写代码

    有了运行环境还不够,在程序的江湖里,还得有一把趁手的"兵器". 工欲善其事,必先利其器,在进行Python开发时,可选择 IDE挺多的,其中,以PyCharm. Eclipse+P ...

  2. redis哨兵搭建

    redis哨兵搭建 1.复制配置文件到conf #单机安装以后[root@t3 redis-5.0.8]# pwd/app/redis-5.0.8[root@t3 redis-5.0.8]# cp s ...

  3. 以太坊blockchain源码分析

    blockchain关键元素 db:持久化到底层数据储存,即leveldb: genesisBlock:创始区块 currentBlock:当前区块,blockchain中并不是储存链所有的block ...

  4. HDU-1051 Wooden Sticks--线性动归（LIS）

    题目大意:有n根木棍(n<5000),每根木棍有一个长度l和重量w(l,w<10000),现在要对这些木头进行加工,加工有以下规则: 1.你需要1分钟来准备第一根木头. 2.如果下一根木头 ...

  5. docker-compose编写示例

    docker-compose.yml 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 ...

  6. Nginx禁止html等缓存

    +++ date="2020-10-16" title="Nginx禁止html等缓存" tags=["nginx"] categories ...

  7. rabbitmq 交换机模式一 直连模式 direct

    代码 <?php require_once "./vendor/autoload.php"; use PhpAmqpLib\Connection\AMQPStreamConn ...

  8. nginx优化:使用expires在浏览器端缓存静态文件

    一,nginx中expires指令的作用 网站的图片等静态文件一旦发布,通常很少改动, 为了减小对服务器请求的压力,提高用户浏览速度, 我们可以设置nginx中的expires, 使用户访问一次后,将 ...

  9. pdf 转word 工具

    在线转换,每天有次数限制,但是很强大: https://smallpdf.com/cn 可以使用python 写代码来转换文档 参考下面博客连接 https://blog.csdn.net/Dontl ...

  10. java抓取东方财富股票数据（附源码）

    背景 前段时间给朋友写了一个自动抓取同花顺股票数据的程序,不少人觉得不错. 这几天后台有粉丝给我留言让我也抓一下东方财富的数据,说东方财富的数据特别难抓,我还真不一定能搞得定. 本来我是一个德艺双磬且 ...