Heim Web-Frontend js-Tutorial Gemeinsame Nutzung gekapselter Funktionen, um mithilfe von JS einen Bewegungspufferungseffekt zu erzielen

Gemeinsame Nutzung gekapselter Funktionen, um mithilfe von JS einen Bewegungspufferungseffekt zu erzielen

Feb 27, 2018 am 09:27 AM
javascript 封装 效果

In diesem Artikel wird hauptsächlich die Kapselungsfunktion von JS zur Erzielung eines Bewegungspuffereffekts vorgestellt, die JavaScript-Zeitfunktionen und numerische Operationskenntnisse umfasst. Freunde in Not können sich darauf beziehen. Ich hoffe, es kann Ihnen helfen.

Früher habe ich viele Bewegungsfunktionen geschrieben, aber später habe ich einen Weg gefunden, sie zu kapseln. (Bewegungspufferung).


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

/*

  物体多属性同时运动的函数

  obj:运动的物体

  oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值

  ratio:速度的系数

*/

function bufferMove(obj, oTarget, fn,ratio = 8) {

  clearInterval(obj.iTimer);

  obj.iTimer = setInterval(function () {

    // 此处设定开关bBtn,假设所有的属性均已运动完毕true

    var bBtn = true;

    for(var sAttr in oTarget){

      // 获取当前值,此处兼容透明度的变化

      if(sAttr === 'opacity') {

        var iCur = parseFloat(getStyle(obj, sAttr) * 100);

      } else {

        var iCur = parseInt(getStyle(obj, sAttr));

      }

      // 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等

      var iSpeed = (oTarget[sAttr] - iCur) / ratio;

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

      // 计算下一次的值

      var iNext = iCur + iSpeed;

      // 赋值给对应样式

      if(sAttr ==='opacity') {

        obj.style.opacity = iNext / 100;

        obj.style.filter = 'alpha(opacity=' + iNext +')';

      } else {

        obj.style[sAttr] = iNext + 'px';

      }

      // 清除定时器,当前的位置和终点值是否相等,相等则说明结束

      if(iNext !== oTarget[sAttr]) {

        bBtn = false;

      }

    }

    // 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn()

    if(bBtn) {

      clearInterval(obj.iTimer);

      if(fn){

        fn();

      }

    }

  }, 50);

}

Nach dem Login kopieren

Die oben genannten Kapselungsfunktionen können auch für einzelne Attribute und Bewegungen mit mehreren Stilen verwendet werden, wie zum Beispiel:


1

bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);

Nach dem Login kopieren

Das ist es.

Verwandte Empfehlungen:

Beispiel für eine JavaScript-Implementierung des Buffering Motion Framework


Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung gekapselter Funktionen, um mithilfe von JS einen Bewegungspufferungseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Apr 03, 2024 am 08:13 AM

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf

Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil Mar 28, 2024 am 11:11 AM

Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil

Exquisite Licht- und Schattenkunst im Frühling, Haqu H2 ist die kostengünstige Wahl Exquisite Licht- und Schattenkunst im Frühling, Haqu H2 ist die kostengünstige Wahl Apr 17, 2024 pm 05:07 PM

Exquisite Licht- und Schattenkunst im Frühling, Haqu H2 ist die kostengünstige Wahl

Test des Vollmodul-Netzteils Huntkey MX750P: 750 W geballte Platin-Stärke Test des Vollmodul-Netzteils Huntkey MX750P: 750 W geballte Platin-Stärke Mar 28, 2024 pm 03:20 PM

Test des Vollmodul-Netzteils Huntkey MX750P: 750 W geballte Platin-Stärke

Colorful Hidden Star P15 24 Test: Ein hartgesottener Allround-Gaming-Laptop mit gutem Aussehen und guter Leistung Colorful Hidden Star P15 24 Test: Ein hartgesottener Allround-Gaming-Laptop mit gutem Aussehen und guter Leistung Mar 06, 2024 pm 04:40 PM

Colorful Hidden Star P15 24 Test: Ein hartgesottener Allround-Gaming-Laptop mit gutem Aussehen und guter Leistung

4K-HD-Bilder ganz einfach verstehen! Dieses große multimodale Modell analysiert automatisch den Inhalt von Webplakaten und ist damit für Mitarbeiter sehr praktisch. 4K-HD-Bilder ganz einfach verstehen! Dieses große multimodale Modell analysiert automatisch den Inhalt von Webplakaten und ist damit für Mitarbeiter sehr praktisch. Apr 23, 2024 am 08:04 AM

4K-HD-Bilder ganz einfach verstehen! Dieses große multimodale Modell analysiert automatisch den Inhalt von Webplakaten und ist damit für Mitarbeiter sehr praktisch.

Ein echtes Ein-Objektiv-Erlebnis mit dem NIKKOR Z 28–400 mm f/4–8 VR-Objektiv Ein echtes Ein-Objektiv-Erlebnis mit dem NIKKOR Z 28–400 mm f/4–8 VR-Objektiv Mar 28, 2024 pm 02:54 PM

Ein echtes Ein-Objektiv-Erlebnis mit dem NIKKOR Z 28–400 mm f/4–8 VR-Objektiv

TrendForce: Nvidias Blackwell-Plattformprodukte sorgen dafür, dass die CoWoS-Produktionskapazität von TSMC in diesem Jahr um 150 % steigt TrendForce: Nvidias Blackwell-Plattformprodukte sorgen dafür, dass die CoWoS-Produktionskapazität von TSMC in diesem Jahr um 150 % steigt Apr 17, 2024 pm 08:00 PM

TrendForce: Nvidias Blackwell-Plattformprodukte sorgen dafür, dass die CoWoS-Produktionskapazität von TSMC in diesem Jahr um 150 % steigt

See all articles