Sowohl CSS3 als auch JQuery können den Easing-Chasing-Effekt erzielen, aber im Hinblick auf die Browserkompatibilität wird empfohlen, die JQuery-Animate-Methode zu verwenden, um dies zu erreichen.
Lassen Sie mich Ihnen den Implementierungseffekt wie folgt zeigen:
Effektdemonstration Quellcode-Download
Referenzierte Datei: jquery-1.11.1.min.js
html
<div id="container"> <div id="first"></div> <div id="second"></div> </div>
jquery
var $first=$('#first'); var $second=$('#second'); (function(){ move1(); move2(); })() function move1(){ $first.animate({ "left":220, "top": 0 },400).animate({ "left":220, "top":220 },400).animate({ "left":0, "top":220 },400).animate({ "left":0, "top":0 },function(){ move1(); }) } function move2(){ $second.animate({ "right":220, "bottom": 0 },400).animate({ "right":220, "bottom":220 },400).animate({ "right":0, "bottom":220 },400).animate({ "right":0, "bottom":0 },function(){ move2(); }) }
Das Obige ist die vom Editor eingeführte Kombination aus jQuery animate und CSS3, um den Zeitlupenverfolgungseffekt zu erzielen. Ich hoffe, dass es für alle hilfreich ist!