이번에는 기본 JS 캡슐화된 페이드인 및 페이드아웃 효과 기능의 단계에 대해 자세히 설명합니다. 실제 사례를 살펴보겠습니다. js의 그라데이션 표시와 사라짐에 대해 말하면 대부분의 친구들은 JQuery의 fadeIn(), fadeOut() 또는 fadeToggle()을 생각할 것입니다. 하지만 단지 그러한 효과를 도입하기 위해 거대한 JQuery 라이브러리를 호출한다면 어떻게 될까요? 즉, 몇 가지 기능을 구현하기 위해 네이티브 js를 사용하여 실력을 향상시켰습니다~
그래서 순수 js 코드에서 페이드인과 페이드아웃을 작성할 때의 효과를 간략하게 연구해보았습니다.
오류가 있으면 댓글로 지적해주시면 제가 직접 수정하도록 하겠습니다
(1) FadeIn 페이드인 기능페이드인과 페이드아웃 효과는 실제로 setInterval()입니다. 위 루프의
DOM 작업은 요소 개체 노드의 투명도를 변경하여 이 효과를 얻을 수 있습니다. 그래서 우리는 setInterval(), 불투명도 및 속도라는 두 가지 필수 항목을 추출합니다.
- 속도: 불투명도 값의 부동 소수점 값이 0에서 1로 변경되도록 설정하는 속도입니다.
- 페이드 인 논리: 불투명도 값의 부동 소수점 값이 0에서 1로 변경됩니다.
html:
<p></p> <span>123</span> <button>fadein</button> <button>fadeOut</button>
css style
<style> p { width: 100px; height: 100px; background-color: #1d7db1; opacity:0; } </style>
먼저 fadeIn 함수의 첫 번째 버전을 작성하는 방법을 살펴보겠습니다. 먼저 구현 아이디어를 이해하세요
function fadeIn(ele, speed) { let num = 0; let time = setInterval(() => { num += speed; ele.style.opacity = num / 100; if (num >= 100) { clearInterval(time); // 清楚定时器 } }, 30); } }
이 효과가 일시적으로 실현되면 몇 가지 사항이 있습니다. 그렇게 간단하지 않습니다. 여러 트리거 효과가 발생하면 setInterval이 동시에 여러 번 사용되어 일부 번거로운 BUG가 발생합니다.
이 문제를 해결하기 위한 해결책이 현재 있습니다. 즉, setInterval이 여러 번 트리거되는 것을 방지하기 위해 전역 상태를 추가하는 것입니다.
let Fadeflag = true; function fadeIn(ele, speed) { let num = 0; if (Fadeflag) { let time = setInterval(() => { num += speed; Fadeflag = false; ele.style.opacity = num / 100; if (num >= 100) { clearInterval(time); Fadeflag = true; } }, 30); } }
호환성 문제! ! !
코드를 먼저 보세요
set: function(elem, num) { elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')'; }
참고: ff 및 GG와 호환되는 표준으로 ie를 사용하기 때문에 코드는 num/100을 설정합니다.
js에서
DOM node투명성 함수 속성을 설정합니다. filter= "alpha (opacity=" + value+ ")" (ie와 호환 가능) ie의 필터 범위는 0~100
opacity=value/100(FF 및 GG와 호환 가능)입니다.
FF와 GG의 불투명도는 0~1입니다. (즉, 필터 범위와 호환되도록 num/100을 사용합니다.)
(2) FadeOut 기능 speed: 여기까지가 불투명도 값을 1에서 설정합니다. 부동 소수점 값은 속도를 0으로 변경합니다(호환성을 고려해야 함)
페이드 아웃 논리: 불투명도 값이 부동 소수점 값 1에서 0으로 변경됩니다.
캡슐화 기능
(function() { let fadeFlag = true; function Fade(selector) { this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector); } Fade.prototype = { constructor: Fade, setOpacity: (elem, opacity) => { // 兼容ie10— elem.filters ? elem.style.filter = 'alpha(opacity = '+ opacity +')': elem.style.opacity = opacity / 100; return true; }, setOpacity: function(num) { this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')'; }, fadeIn: function(speed, opacity){ /* speed ==>淡入的速度,正整数(可选); opacity ==>淡入到指定的透明度,0~100(可选); */ speed = speed || 2; opacity = opacity || 100; let num = 0; // 初始化透明度变化值为0 if (fadeFlag) { let time = setInterval(() => { num += speed; fadeFlag = false; this.setOpacity(num); this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')'; if (num >= opacity) { clearInterval(time); fadeFlag = true; } }, 20); } }, fadeOut: function(speed, opacity) { /* speed ==>淡入的速度,正整数(可选); opacity ==>淡入到指定的透明度,0~100(可选); */ speed = speed || 2; opacity = opacity || 0; let num = 100; // 初始化透明度变化值为0 if (fadeFlag) { let time = setInterval(() => { num -= speed; fadeFlag = false; this.set(num); this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')'; if (num <p style="text-align: left;">테스트 예: </p><pre class="brush:php;toolbar:false">let btn = document.getElementsByTagName('button')[0]; let btn2 = document.getElementsByTagName('button')[1]; btn.onclick = () => { let fade = new Fade('p1'); fade.fadeIn(); }; btn2.onclick = () => { let fade = new Fade('p1'); fade.fadeOut(); }
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
반응 네이티브 패키지 플러그인 swiper를 사용하는 단계에 대한 자세한 설명캐싱 알고리즘의 FIFO/LRU 구현위 내용은 기본 JS 캡슐화 페이드인 및 페이드아웃 효과 기능의 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

드림위버 CS6
시각적 웹 개발 도구

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
