JavaScript:跳动的小球: Bounce效果

JavaScript:跳动的小球: Bounce效果
<! DOCTYPE HTML PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > < html > < head > < meta http - equiv = " Content-type " content = " text/html; charset=utf-8 " > < title > Title </ title > < style type = " text/css " > * { padding: 0px; margin: 0px; } body, html { font - family: arial; font - size: 14px; } a, a:active, a:focus { outline:none; blr:expression( this .onFocus = this .blur()); } #div { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background - color: black; border - radius: 50px; } </ style > < script src = " js/jquery.js " ></ script > < script src = " js/jquery.easing.js " ></ script > < script type = " text/javascript " > $( function () { var x = $(window).width() / 2 ; var y = $(window).height() / 2 ; // queue设置为false,这样水平和垂直的动画同时进行 $( " #div " ).animate({left: x}, {queue: false , duration: 2000 , easing: " linear " }).animate({top: y}, 2000 , " easeOutBounce " ); // $("#div").animate({left: x}, 2000, "linear").animate({top: y}, 2000, "easeOutBounce"); }); </ script > </ head > < body > < div id = " div " ></ div > </ body > </ html >

你可能感兴趣的:(JavaScript:跳动的小球: Bounce效果)