찾다
웹 프론트엔드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)的数据结构,可以用来

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实现队列的消息确认和消费失败处理的方法,并提供具体的代码示例。消息确认在队列中,消息的确认是指消费者成功处理消息后,向队列发送

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

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

使用队列反转二叉搜索树中的路径的C++代码使用队列反转二叉搜索树中的路径的C++代码Sep 14, 2023 pm 07:21 PM

例如,给定一个二叉搜索树,我们需要从特定键反转其路径。寻找解决方案的方法在这种方法中,我们将创建一个队列并推送所有节点,直到获得根节点。p>示例&nbsp;#include<bits/stdc++.h>usingnamespacestd;structnode{&nbsp;&nbsp;intkey;&nbsp;&nbsp;structnode*left,*right;};structnode*newNode(intitem){&nb

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를 무료로 생성하십시오.

뜨거운 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

mPDF

mPDF

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