多物体淡入淡出

最新推荐文章于 2022-04-09 20:59:51 发布
最新推荐文章于 2022-04-09 20:59:51 发布
阅读量475 收藏
点赞数 1
分类专栏： JavaScript 文章标签： 淡入淡出 多物体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51877956
版权

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div {

width: 200px;

height: 200px;

background-color: red;

margin: 20px;

float: left;

filter: alpha(opacity: 30);

opacity: 0.3;

}

</style>

</head>


<body>

<div></div>

<div></div>

<div></div>

<div></div>


<script type="text/javascript">

var aDivs = document.getElementsByTagName("div");

for (var i = 0; i < aDivs.length; i++) {

aDivs[i].timer = null;

aDivs[i].alpha = 30;

aDivs[i].onmouseover = function() {

startMove(this, 100);

}

aDivs[i].onmouseout = function() {

startMove(this, 30);

}

}

// var alpha = 30;

function startMove(obj, iTarget) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

var speed = (iTarget - obj.alpha) / 10;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (obj.alpha == iTarget) {

clearInterval(obj.timer);

} else {

obj.alpha += speed;

obj.style.opacity = obj.alpha / 100;

obj.style.filter = "alpha(opacity:" + obj.alpha + ")";

}

}, 20);

}


// 1. 获取元素

// 2. 事件绑定

// 3. 运动函数

// 4. 清除定时器

// 5. 设置定时器

// 6. 速度

// 7. 速度取整

// 8. 判断是否到目标位置

// 9. 到了清除定时器，不到继续运动

//

// var aDivs = document.getElementsByTagName("div");

// for (var i = 0; i < aDivs.length; i++) {

// aDivs[i].timer = null;

// aDivs[i].onmouseover = function() {

//

// }

// aDivs[i].onmouseout = function() {

//

// }

// }

//

// function startMove(obj, iTarget) {

// clearInterval(obj.timer);

// obj.timer = setInterval(function() {

// var speed = (iTarget - obj.offsetTop) / 10;

// speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

// if (obj.offsetTop == iTarget) {

// clearInterval(obj.timer);

// } else {

// obj.style.top = obj.offsetTop + speed + 'px';

// }

// }, 20);

// }

</script>

</body>


</html>

Vivian_shuang
关注
专栏目录
an怎么做淡入_切换场景的淡入淡出效果
weixin_39894255的博客
12-20 4889
通过改变图片的透明度来控制场景的淡入和淡出一、首先在A和B场景中各添加Image使其铺满屏幕，并且添加CanvasGroup组件并且Image颜色设置为黑色，A场景Alpha设置为0，B场景Alpha设置为1二、在AB两个场景中各创建空物体，添加脚本，代码如下using System.Collections;using System.Collections.Generic;using UnityE...
物体淡入淡出
Vivian_shuang的博客
07-11 408
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> #div1{ width: 200px; height: 200px; background-color: red; /* 兼容IE的透明度 0 - 1 */ filter: alpha(opacity
多物体的的淡入淡出效果
请叫我二狗哥
08-21 254
实现效果：多个Div区块实现鼠标移入该区块，该区块逐渐透明图降低，鼠标移出该区块，该区块透明度逐渐恢复原状。 主要应用：js运动框架的使用 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;JS实现多个Div元素的不透明度变化&lt;/title&gt; &lt;meta charset="utf-8"&gt;
js的继承
csdssdn的博客
04-09 1468
目录 预备知识 1. 构造函数的属性 2、什么是原型对象 3、原型对象的作⽤ 第⼆部分：五种js 继承⽅式 ⽅式1、原型链继承 方式2、借用构造函数继承 方式3、组合继承 ⽅式4、组合继承优化1 ⽅式5、组合继承优化2 又称 寄生组合继承 --- 完美方式 第三部分：其他相关问题 1、Object.create(object, propertiesObject) 2、new的过程 3、为什么‘组合继承’这种⽅式，会执⾏两次⽗类构造函数？？ 第一部分、预备知识 1. 构
JS事件冒泡
wang_swa99er的博客
09-07 1110
JS事件冒泡 浏览器上事件天生一个特点：事件流 事件冒泡：由里向外逐级触发 事件捕获：由外向里逐级触发 组织事件冒泡：浏览器兼容问题 事件对象的属性和方法 cancelBubble=true （取消冒泡） stopPropagation() （停止传播） 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con
ElasticSearch
佐月儿
12-31 735
基本概念 接近实时(NRT) Elasticsearch 是一个接近实时的搜索平台。这意味着，从索引一个文档直到这个文档能够被搜索到有一个很小的延迟（通常是 1 秒）。 集群(cluster) 代表一个集群，集群中有多个节点（node），其中有一个为主节点，这个主节点是可以通过选举产生的，主从节点是对于集群内部来说的。es的一个概念就是去中心化，字面上理解就是无中心节点，这是对于集群外部来说...
Unity3D实现模型淡入淡出效果
08-26
- **Fade**：半透明淡出模式，允许物体部分透明，适合用于淡入淡出效果。 - **Transparent**：完全透明模式，物体完全透明，适用于需要完全透明的物体。 在进行淡入淡出操作时，需要将模型的渲染模式更改为Fade...
JS实现物体淡入淡出效果
wang_swa99er的博客
02-21 1286
JS实现物体淡入淡出效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
Unity实现背景图片淡入淡出效果
08-26
在Unity引擎中，实现背景图片的淡入淡出效果是一个常见的视觉效果，它能为游戏或应用程序增添动态感和过渡效果。以下是如何在Unity中创建这个功能的详细步骤和技术要点。 首先，我们需要创建两个背景图片（Image...
Flash两级菜单淡入淡出菜单.rar
07-10
在淡入淡出效果中，我们可能需要使用`TweenLite`或`TweenMax`库，这两个库提供了强大的时间轴控制功能，可以轻松地实现物体的平移、缩放和透明度变化。 3. 透明度调整：在ActionScript中，`alpha`属性用于控制对象...
js99er-angular
02-05
JS99'er 这是使用Angular和TypeScript开发的js99er.net的新版本。 尝试。 该项目是使用版本1.7.3生成的。 搭建开发环境 将存储库克隆到计算机上的文件夹 安装 安装Angular CLI： npm install -g @angular/cli 转到包含源代码的目录并安装依赖项： npm install 通过键入以下命令在本地运行js99er： ng serve 打开浏览器并输入地址： http://localhost:4200 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何
JS继承
Mindy9Meng的博客
09-14 1717
JS 中的继承是什么？ 两次的原型搜索就是继承。 数组 a 从 Array 中原型搜索到 toString 属性，只是实例属性；a 从 Array 中原型搜索到 （Array 从 Object 中原型搜索到的）valueOf 属性，可以称为继承。 让我们用代码来实现继承： 1. 使用 prototype 实现继承 prototype 的作用：为构造函数内添加实例对象之间的共有属性 // 构造一个 ...
Linux学习笔记二（常用的命令）
weixin_42420792的博客
08-26 8374
Linux的一些常用命令汇总。 【1】ls 查看文件 ls -l == ll # 查看文件信息 ls -ahdi # a：隐藏文件 h：显示单位 d：文件夹 i：文本id 【2】cd 目录切换 cd cd / # 返回根目录 cd - # 返回上一次目录 cd .. # 返回上一级目录 【3】pwd 显示当前工作路径 pwd # 显示当前工作路径 【4】cp 复制 # v:显示信息 r：递归 f：覆盖
99乘法表与nn乘法表
Wu_ye123的博客
12-10 2042
99乘法表和n*n乘法表
鼠标事件对象的属性
wang_swa99er的博客
09-07 2769
鼠标事件对象的属性 事件对象： button的属性 0 左键 1 滚轮 2 右键 获取当前鼠标位置(原点位置不一样) clientX clientY 原点位置：可视窗口的左上角为原点 pageX pageY 原点位置：整个页面的左上角(包括滚出去的波动距离) screenX screenY 原点位置：电脑屏幕的左上角 例： document.onmousedown = function(ev){ var
js之事件冒泡和事件捕获详细介绍
maohuihua的专栏
03-27 995
preventDefault：preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认 行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接&lt;a&gt;，提交按钮&lt;input type=”submit”&gt;等。当Event对象的cancelable为false时，...
js阻止时间冒泡
weixin_42488377的博客
11-14 246
认识BOM
wang_swa99er的博客
08-26 278
认识BOM 所谓 BOM 指的就是浏览器对象模型 Browser Object Model，它的核心就是浏览器。 系统对话框 window方法(一般情况下window可以省略) alert() 弹出警告框 confirm() 弹出一个带确定和取消的提示框 返回值：如果点击确定，返回true 如果点击取消，返回false prompt() 弹出一个带输入框的提示框 参数： 第一个参数：面板上显示的内容 第二个参数：
JS元素节点的属性之修改元素内容
wang_swa99er的博客
08-27 537
JS元素节点的属性之修改元素内容 1.innerHTML 获取标签间内容，会解析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
unity 背景音乐开关，音量淡入淡出
最新发布
05-31
在 Unity 中，你可以使用 Audio Source 组件来控制背景音乐的播放、暂停和音量等属性。如果你想要实现背景音乐的开关和音量淡入淡出效果，可以按照以下步骤进行操作： 1. 在场景中添加一个空物体，并将其命名为 AudioManager。 2. 在 AudioManager 上添加 Audio Source 组件，并将背景音乐的音频文件拖拽到 Audio Source 的 AudioClip 属性中。 3. 在 AudioManager 上添加一个 C# 脚本，并将其命名为 AudioManager。 4. 在 AudioManager 脚本中添加如下代码： ``` using UnityEngine; public class AudioManager : MonoBehaviour { public static AudioManager instance; private AudioSource audioSource; private void Awake() { if (instance == null) { instance = this; } else { Destroy(gameObject); } audioSource = GetComponent<AudioSource>(); } public void PlayMusic() { audioSource.Play(); } public void StopMusic() { audioSource.Stop(); } public void FadeIn(float fadeTime) { StartCoroutine(FadeInCoroutine(fadeTime)); } public void FadeOut(float fadeTime) { StartCoroutine(FadeOutCoroutine(fadeTime)); } private IEnumerator FadeInCoroutine(float fadeTime) { float targetVolume = audioSource.volume; audioSource.volume = 0f; while (audioSource.volume < targetVolume) { audioSource.volume += Time.deltaTime / fadeTime; yield return null; } audioSource.volume = targetVolume; } private IEnumerator FadeOutCoroutine(float fadeTime) { float startVolume = audioSource.volume; while (audioSource.volume > 0f) { audioSource.volume -= startVolume * Time.deltaTime / fadeTime; yield return null; } audioSource.Stop(); audioSource.volume = startVolume; } } ``` 5. 在你的游戏中的任何地方，例如一个按钮的 OnClick 事件中，调用 AudioManager.instance.PlayMusic() 来播放背景音乐。 6. 当需要暂停背景音乐时，调用 AudioManager.instance.StopMusic()。 7. 当需要淡入背景音乐时，调用 AudioManager.instance.FadeIn(fadeTime)，其中 fadeTime 是淡入的时间（单位为秒）。 8. 当需要淡出背景音乐时，调用 AudioManager.instance.FadeOut(fadeTime)，其中 fadeTime 是淡出的时间（单位为秒）。 这样，你就可以通过代码来实现背景音乐的开关和音量淡入淡出效果了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值