开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js的淡入淡出

原生 JavaScript 实现淡入淡出效果，通常是通过修改元素的透明度（opacity）属性，并结合定时器（如 setInterval 或 requestAnimationFrame）来逐步改变这个属性值，从而实现平滑的过渡效果。

以下是使用原生 JavaScript 实现淡入淡出的基础示例：

淡入效果

function fadeIn(element, duration) {
    let opacity = 0;
    const timer = setInterval(function () {
        if (opacity >= 1) {
            clearInterval(timer);
        }
        element.style.opacity = opacity;
        element.style.filter = 'alpha(opacity=' + opacity * 100 + ")"; // 兼容IE
        opacity += opacity * 0.1; // 调整这个值可以改变淡入速度
    }, duration / 10);
}

// 使用示例
const element = document.getElementById('myElement');
fadeIn(element, 1000); // 1秒内淡入

淡出效果

function fadeOut(element, duration) {
    let opacity = 1;
    const timer = setInterval(function () {
        if (opacity <= 0) {
            clearInterval(timer);
            element.style.display = 'none'; // 可选：淡出后隐藏元素
        }
        element.style.opacity = opacity;
        element.style.filter = 'alpha(opacity=' + opacity * 100 + ")"; // 兼容IE
        opacity -= opacity * 0.1; // 调整这个值可以改变淡出速度
    }, duration / 10);
}

// 使用示例
const element = document.getElementById('myElement');
fadeOut(element, 1000); // 1秒内淡出

优势

无需额外库：原生 JavaScript 实现，不依赖任何外部库。
灵活性：可以轻松调整淡入淡出的速度和持续时间。
兼容性：虽然上述示例中包含了 IE 的滤镜兼容代码，但现代浏览器都支持 opacity 属性，因此可以在大多数浏览器上运行。

应用场景

图片或元素的渐显渐隐：在图片轮播、幻灯片展示等场景中常用。
页面过渡效果：在单页应用（SPA）中，用于页面切换时的过渡效果。
提示信息的显示与隐藏：如提示框、消息通知等。

注意事项

性能考虑：频繁地修改 DOM 属性可能会影响性能，特别是在移动设备上。因此，在实现复杂的动画效果时，应考虑使用 requestAnimationFrame 代替 setInterval，以获得更好的性能。
浏览器兼容性：虽然现代浏览器普遍支持 opacity 属性，但在处理旧版 IE 浏览器时可能需要额外的兼容性代码。

进阶

对于更复杂的动画效果，或者需要更高性能的场景，可以考虑使用 CSS3 的 transition 或 animation 属性来实现淡入淡出效果，这些属性在现代浏览器中通常能提供更好的性能和更流畅的动画效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生js实现淡入淡出轮播图效果

下面为原生js写出来的轮播图淡入淡出效果，源代码能够正确运行。 1.效果展示 2.源代码 swiper.html js"> swiper.js

1751 0

图片轮播(淡入淡出)--JS原生和jQuery实现

图片轮播(淡入淡出)--js原生和jquery实现图片轮播有很多种方式，这里采用其中的淡入淡出形式 js原生和jQuery都可以实现，jquery因为封装了很多用法，所以用起来就简单许多，转换成...js使用，其实也就是用js原生模拟出这些用法。...对于淡入淡出式 1.首先是个外围部分（其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方（也就是一个banner吧） 3.然后是一个图片组（可以用新的div 也可以直接使用...原生方式 demo 原生方式大致来说就是模拟jquery 因为我用了太多的class,所以要增加一些class的处理函数（可以用id，应该会更便捷）通过class名取标签元素（注意了，因为现在我只针对于标签有一个...原生(淡入淡出) 6 7 body,div,ul,li,a,img{margin: 0;padding: 0;} 8

24.1K1 0

原生js的笔记

引入Javascript 的方式有三种 1.在html 中直接放到 2.外部引入js文件 3.在标签直接写 <p...2、以驼峰命名规则 ——开始单词小写后面的单词首字母大写例如 helloWorld boyAge suZiXing 保留字 js中大小写严格区分的 alert弹框 String（）保留字不能用于普通表示符...所传的对象就是this的指向。...全局作用域：在js中作用域：一个变量作用的范围 1、全局作用域（整个标签中）：页面打开全局作用域被打开，页面关闭全局作用域被销毁；全局作用域的变量叫全局变量，全部变量可以在全局作用域中使用...* 我们将通过一个构造函数创建的对象，称为是该类的实例 * this的情况： * 1.当以函数的形式调用时，this是window，默认就是window * 2.当以方法的形式调用时，谁调用方法this

961 0

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

DOCTYPE html> 淡入淡出学习路径：智能社的开发教程

1.7K9 0

原生JS的Ajax

转自：https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象非IE6浏览器：var obj = new XMLHttpReuqest...Date().getTime(),true); 3.发送请求 obj.send(); 4.接收返回值请求状态监控:onreadystatechange事件：当自己的Ajax...---返回值responseText:从服务器返回的文本：obj.responseText（返回的为字符串） GET方式 function getAjax(){ var obj

11.1K2 0

js书写原生ajax,JS 原生ajax写法

原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户，使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

15.3K4 0

input获取焦点原生js_原生js的input事件

大家好，又见面了，我是你们的朋友全栈君。...1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。...4.onkeydown 按下按键时的事件触发， 5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件，没怎么用过 6.onclick...主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件 7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中 8.oninput...当input的value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法：以上事件可以直接放到input的属性里，例如： 1 ，可以通过js给input

25.8K6 0

原生JS TitleTip

在此记录自己已理解并开始遵循的前端代码规范。What How Why 原生JS TitleTip 为了实现对特定的A标签Title的美化，使其可以按照我们想要的样式显示。

6.2K4 0

JS原生复制

").innerText; var input = document.getElementById("input"); input.value = text; // 修改文本框的内容

16.9K3 0

原生JS拖拽

content="IE=edge"> 原生...JS拖拽 * { margin: 0; padding: 0; }...class="box" id="drag"> window.onload = function () { // 获取拖拽的节点...let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候...=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 let leftX = event.clientX - drag.offsetLeft;

13.1K4 0

JS原生打印

//打印预览 window.print(); /*设置默认横向打印*/ @page { size: landscape; } /*设置默认纵向打印*/ @...

22.5K2 0

原生JS之fetch

今天看JS文章，发现了一个新方法fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch 这货跟ajax...很类似，跟axios功能一样；除啦IE这个货之外基本上都支持的属性； fetch('http://example.com/movies.json') .then(function(response...response.json(); }) .then(function(myJson) { console.log(myJson); }); 看起来是不是很爽，不用安装任何插件完成请求大写的666

5.2K2 0

原生JS的知识系统梳理

笔者最近在对原生JS的知识做系统梳理，因为我觉得JS作为前端工程师的根本技术，学再多遍都不为过。...第一篇: JS数据类型之问——概念篇 1.JS原始数据类型有哪些？引用数据类型有哪些？...这导致JS中的Number无法精确表示非常大的整数，它会将非常大的整数四舍五入，确切地说，JS中的Number类型只能安全地表示-9007199254740991(-(2^53-1))和9007199254740991...JS中类型转换有哪几种？ JS中，类型转换只有三种：转换成数字转换成布尔值转换成字符串转换具体规则如下: 注意"Boolean 转字符串"这行结果指的是 true 转字符串的例子 ?...这就是面向组合的设计方式。参考出处: ES5实现继承那些事重学JS系列:聊聊继承 JS最新基本数据类型:BigInt(译) yck前端面试之道

1.8K5 3

原生JS | 作用域

局部变量常见的局部变量有以下两种： ● 在函数内声明的变量（使用var）； ● 函数参数（形参）。局部变量存在于函数体内，它们的值只能在函数体内访问和修改。...变量的查找方式 & 作用域链变量的查找方式当局部作用域当中出现属性的时候，首先查找当前的作用域当中是否具有存储空间，如果有，直接采用；如果没有，向其父级查找，如果父级没有，继续向上，直到查找到window...也就是“案例1”的代码中 user与window.user是等价的。...，不难看出，全局的user变量和函数内部的变量，并不是同一个变量。...更多的案例练习在我们（HTML5学堂-码匠）开发的微信小程序“决胜前端”当中，我们最新更新了关于作用域的一些练习题，感兴趣的可以进入微信小程序。

4.8K5 0

原生js数组排序

大家好，又见面了，我是你们的朋友全栈君。...原生js数组排序 js 排序以正序为例（即由小到大） var arr = [0,2,1,4,3,9,6,5,7,8]; // 未排序的数组 var sortArr = null; // 排序后得到的数组...} } return nArr; } sortArr = sort(arr); 此方法会重新生成一个数组，并对其进行排序，并且执行效率较高,但是代码量比较大，对于我们这种爱研(de)究(se)的同学来说是不会满足于此的...这也是递归算法的终结部分 var base = Math.floor(arr.length / 2);//找到中间的基准元素位置 var baseEle = arr.splice(base, 1...这也是递归算法的终结部分 var base = Math.floor(arr.length / 2);//找到中间的基准元素位置 var baseEle = arr[base];//把基准元素从

5.8K3 0

js 原生无缝滚动

/当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端 else{ demo.scrollTop++ //如果是横向的 ...setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的...//当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端 else{ demo.scrollTop++ //如果是横向的...setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

37.7K3 0

原生JS--Ajax

原生Ajax: Ajax基础: --ajax:无刷新数据读取,读取服务器上的信息 --HTTP请求方法: --GET:用于获取数据,如浏览帖子 --POST:用于上传数据,如用户注册...--有缓存 POST:--不通过网址传递 --post容量较大,一般可达2G --安全性相对较高 --没有缓存原生Ajax的编写: Ajax...t='+new Date().getTime(),true); --同步:js中指事情必须一件一件来 --异步:js中指多件事情要一起做 --ajax是做异步传输的,... 　alert('成功:'+oAjax.responseText); 　 } 　} 　} 将原生Ajax封装成一个函数使用,最终编写的原生Ajax...为: 1) GET方法封装的函数为: 　　function ajax(url,fnSuccess,fnFaild){ 　　//1.创建Ajax对象　　//js中,使用一个没有定义的变量会报错,

6.2K2 1

自己原生js封装的ajax请求

前言这几天在恶(xue)补(xi)node.js，其中老师讲到了ajax，以前学习js都是东一点、西一点。不系统，当然，原因也很多。...当时一些js基础知识也欠缺（虽然现在也不咋的），想要自己封装，难度也很大。今天也终于自己封装一个简易的ajax。...viewport" content="width=device-width, initial-scale=1.0"> Title js...success: function (res) { console.log(res); }, dataType: 'json' }) 压缩文件下载：ajax.min.js

4.1K3 0

原生JS实现jQuery的链式调用

其实在我们学习使用jQuery的过程中，我们经常是这样使用的： $("html").css(); $.get("/abc", function(){}) 发现特别好用，而我在前段时间处理webview的时候...，也多次使用到js，并且对于使用原生JS感到稍有不便。...那么如何去实现如何jQuery的方法呢。其实代码很简单，我也是门外汉，记录下来也是为我自己做一个学习的方式，希望如果有更好的方式可以跟我说。

2K3 0

记几处原生JS的开发原

我先用jquery实现的功能，然后替换里面几个方法即可，无非就是查找，添加class等！在控制台先测试好，直接使用就行了，但遇到以下问题，简单记一下： 0、项目引用了prism.js来加亮代码。...高亮后，IE11非常的卡，无法滚动，按F12查看性能，要2秒多去渲染一屏，这和JS无关了。我以为是元素过多，IE性能太差的原因。后来偶然把prism.css文件去掉，结果瞬间显示出来。...先想肯定是阴影或变形引起的吧，就把css中的shadow去掉，还不行。就一块块的去CSS代码。在把透明度去掉，就好了！...执行它的脚本会提示“不能执行已释放 Script 的代码” 。这个问题也好理解，因为我是往里写了完整的页面： .........frm得到的竟然直接是一个window对象，我的个天呀！在chrome，ff中，可不是这样，我还没有去百度原因，不知道有没有什么说法没有。

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭