CSS3和jquery都可以實現緩動追逐效果,但是考慮到瀏覽器的兼容性,建議使用jquery animate方法來實現。
先給大家展示下實現效果如下:
引用文件: 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();})}
以上所述是小編給大家介紹的jQuery animate和CSS3相結合實現緩動追逐效果,希望對大家有所幫助!
新聞熱點
疑難解答