찾다
웹 프론트엔드JS 튜토리얼큐를 사용하여 jquery 애니메이션 알고리즘 시뮬레이션 example_jquery

이 문서의 예에서는 대기열을 사용하여 jquery를 시뮬레이션하는 애니메이션 알고리즘을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

Aaron은 최근 알고리즘 연구에 푹 빠졌습니다. 아마도 많은 뇌 세포 비용이 소요될 것입니다. 저는 노력을 아끼기 위해 기성품을 선택하는 것을 좋아합니다. 그가 작성한 소스 코드를 발견하고 실행하는 것이 꽤 재미있었기 때문에 이를 분석하여 첫째로 내부의 영양분을 흡수하고 둘째로 소스 코드 학습 기술을 심화시키기 위해 사용했습니다. 이 소스코드는 정말 js의 내부강도를 높이는 비결이라고 합니다. 믿기지 않으시면 저와 함께 맛보러 오세요.

코드 복사 코드는 다음과 같습니다.
//즉시 함수를 실행하면 할 말이 없습니다. 아래 데모를 시청하세요
/**
(함수($){
//여기서의 $는 다음에 나오는 즉시 실행 함수의 반환값으로 제공됩니다
})(함수(){
//이 함수를 실행한 결과는 $
입니다. 쿼리 반환
}())

*/
(함수($) {
​ window.$ = $;
})(함수() {

//ID 문자열을 일치시키는 데 사용됩니다
//(?: 그룹화 없음을 나타냄), 일반 콘텐츠 참조
//하지만 개인적으로는 #
뒤에 문자가 하나 이상 있어야 하기 때문에 *를 기호로 바꾸는 것이 더 낫다고 생각합니다. var rquickExpr = /^(?:#([w-]*))$/;
//얼핏 보면 제이쿼리의 중증 환자인 것 같습니다
함수 aQuery(선택기) {
           새 aQuery.fn.init(선택기) 반환;
}

/**
* 애니메이션
* @return {[유형]} [설명]
​​*/
var animation = function() {

var self = {};
        var Queue = [] //애니메이션 큐
        var 실행 = false //애니메이션 잠금
        var first = true; //추가 인터페이스를 통해 트리거됨

var getStyle = function(obj, attr) {
                 return obj.currentStyle ? obj.currentStyle[attr] : getCompulatedStyle(obj, false)[attr];
}
//모두 특정 애니메이션 효과이므로 이해하는데 어려움은 없습니다
        var makeAnim = function(element, options, func) {
            var width = options.width
// 특정 실행 알고리즘을 패키징했습니다
                           //css3
                         //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                  element.style.webkitTransform = 'translate3d(' 너비 'px,0,0)';

//모니터링 애니메이션 완료
               element.addEventListener('webkitTransitionEnd', function() {
                  func()
            });
}

var _fire = function() {
//추가된 애니메이션이 실행됩니다
                if (!fireing) {
            var OnceRun = Queue.shift();
                     if (onceRun) {
//반복 트리거 방지
                    실행 = true;
                           //다음
                     OnceRun(function() {
불 = 거짓;
//여기서 직렬 호출의 효과가 매우 교묘하게 생성됩니다
                       _fire();
                     });
                    } else {
                    실행 = true;
                }
            }
}

자신을 반환 = {
//큐 추가
               추가: 기능(요소, 옵션) {
//전체 알고리즘의 핵심은 다음과 같습니다
//배열에 함수를 추가하는 것과 같습니다
//[함수(func){},...]
                              // _fire의 OnceRun 메소드이고 이때 func가 전달되었습니다.
                             // Aaron은 사전 컴파일 등의 프로그래밍에서 이 기술을 사용하는 것을 좋아합니다.
Queue.push(함수(func) {
                        makeAnim(요소, 옵션, func);
                });

//큐가 있으면 즉시 애니메이션을 실행합니다
If (첫 번째 && Queue.length) {
//이 스위치는 나중에 추가되는 요소의 대기열을 제어하는 ​​데 아주 좋은 역할을 합니다
                      1번 = 거짓;
//이것은 _fire();
를 직접 실행하는 것과 같습니다. // Aaron은 A를 설치하고 의도적으로 self.fire를 추가하는 것을 좋아합니다. 어쩌면 그는 원시인 것일 수도 있습니다
                       self.fire();
                }
            },
//트리거
화재: function() {
                   _fire();
            }
}
}();

aQuery.fn = aQuery.prototype = {
         실행: 기능(옵션) {
animation.add(this.element, options);
              이것을 돌려주세요.
}
}

var init = aQuery.fn.init = function(selector) {
        var match = rquickExpr.exec(selector);
         var 요소 = document.getElementById(match[1])
This.element = 요소;
         이것을 돌려주세요;
}
//이 코드 줄을 거의 과소평가했습니다
//jquery 사용법을 잘 배웠습니다
//직접 aQuery.fn.init = aQuery.fn 하는 게 낫지 않을까요?
//초기화 변수가 하나 더 추가된 것은 단지 쿼리를 줄이기 위한 것인데, 최적화 아이디어는 어디에나 있습니다.
init.prototype = aQuery.fn;
쿼리 반환;
}());

//돔
var oDiv = document.getElementById('div1');

//전화
oDiv.onclick = function() {

$('#div1').run({
         '너비': '500'
}).run({
        '너비': '300'
}).run({
        '너비': '1000'
});
};

html을 첨부하시면 직접 수정하실 수 있습니다. 탐색하려면 크롬을 사용하는 것을 잊지 마세요.

코드 복사 코드는 다음과 같습니다.
클릭

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Python中的Deque: 实现高效的队列和堆栈Python中的Deque: 实现高效的队列和堆栈Apr 12, 2023 pm 09:46 PM

Python 中的 deque 是一个低级别的、高度优化的双端队列,对于实现优雅、高效的Pythonic 队列和堆栈很有用,它们是计算中最常见的列表式数据类型。本文中,云朵君将和大家一起学习如下:开始使用deque有效地弹出和追加元素访问deque中的任意元素用deque构建高效队列开始使用Deque向 Python 列表的右端追加元素和弹出元素的操作,一般非常高效。如果用大 O 表示时间复杂性,那么可以说它们是 O(1)。而当 Python 需要重新分配内存来增加底层列表以接受新的元素时,这些

怎样使用Supervisor管理ThinkPHP6队列?怎样使用Supervisor管理ThinkPHP6队列?Jun 12, 2023 am 08:51 AM

随着Web应用的不断发展,我们需要处理大量的任务来保持应用的稳定性和可用性。使用队列系统就是一种解决方案。ThinkPHP6提供了内置的队列系统来管理任务。然而,处理大量的任务需要更好的队列管理,这时候可以使用Supervisor来实现。本文将介绍如何使用Supervisor管理ThinkPHP6队列。在此之前,我们需要了解一些基础的概念:队列系统队列系统是

在Java中,add()方法和offer()方法在队列中有什么区别?在Java中,add()方法和offer()方法在队列中有什么区别?Aug 27, 2023 pm 02:25 PM

Java中的队列是一种线性数据结构,具有多种功能。队列有两个端点,它遵循先进先出(FIFO)原则插入和删除其元素。在本教程中,我们将了解Java中队列的两个重要函数,它们是add()和Offer()。什么是队列?java中的队列是一个扩展了util和collection包的接口。元素在后端插入并从前端移除。java中的队列可以使用链表、DeQueue、优先级队列等类来实现。优先级队列是普通队列的扩展形式,每个元素都有一个优先级。队列的add()方法该方法用于向队列中插入元素。它将定义的元素(作为

队列在PHP与MySQL中的任务监控和任务调度的实现方案队列在PHP与MySQL中的任务监控和任务调度的实现方案Oct 15, 2023 am 09:15 AM

队列在PHP与MySQL中的任务监控和任务调度的实现方案引言在现代的Web应用程序开发中,任务队列是非常重要的一项技术。通过队列,我们可以将一些需要在后台执行的任务排队,并通过任务调度来控制任务的执行时间和顺序。本文将介绍如何在PHP与MySQL中实现任务的监控和调度,并提供具体的代码示例。一、队列的工作原理队列是一种先进先出(FIFO)的数据结构,可以用来

Yii框架中的队列:高效地处理异步操作Yii框架中的队列:高效地处理异步操作Jun 21, 2023 am 10:13 AM

随着互联网的快速发展,应用程序对于处理大量并发请求和任务变得越来越重要。在这样的情况下,处理异步任务是必不可少的,因为这可以使应用程序更加高效,并更好地响应用户请求。Yii框架提供了一个方便的队列组件,使得处理异步操作更加容易和高效。在本篇文章中,我们将探讨Yii框架中队列的使用和优势。什么是队列队列是一种数据结构,用于处理数据的先进先出(FIFO)顺序。队

PHP秒杀系统中的队列和异步处理优化方法PHP秒杀系统中的队列和异步处理优化方法Sep 19, 2023 pm 01:45 PM

PHP秒杀系统中的队列和异步处理优化方法随着互联网的迅速发展,电商平台上的各种优惠活动如秒杀、抢购等也成为了用户关注的焦点。然而,这种高并发的用户请求对于传统的PHP应用来说是一个巨大的挑战。为了提高系统的性能和稳定性,解决并发请求带来的压力,开发人员需要对秒杀系统进行优化。本文将重点介绍在PHP秒杀系统中通过队列和异步处理实现的优化方法,并给出具体的代码示

队列的消息确认和消费失败处理在PHP与MySQL中的实现方法队列的消息确认和消费失败处理在PHP与MySQL中的实现方法Oct 15, 2023 pm 01:46 PM

队列的消息确认和消费失败处理在PHP与MySQL中的实现方法队列是一种常见的消息传递机制,它可以帮助解决系统中的高并发问题,实现异步处理和解耦。在队列的设计中,消息的确认和消费失败处理是非常重要的环节。本文将探讨使用PHP与MySQL实现队列的消息确认和消费失败处理的方法,并提供具体的代码示例。消息确认在队列中,消息的确认是指消费者成功处理消息后,向队列发送

PHP邮件队列系统的原理和实现方式是什么?PHP邮件队列系统的原理和实现方式是什么?Sep 13, 2023 am 11:39 AM

PHP邮件队列系统的原理和实现方式是什么?随着互联网的发展,电子邮件已经成为人们日常生活和工作中必不可少的通信方式之一。然而,随着业务的增长和用户数量的增加,直接发送电子邮件可能会导致服务器性能下降、邮件发送失败等问题。为了解决这个问题,可以使用邮件队列系统来通过串行队列的方式发送和管理电子邮件。邮件队列系统的实现原理如下:邮件入队列当需要发送邮件时,不再直

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구