Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Hiệu ứng nẩy bật tuyệt đẹp với jQuery
URL: https://www.javascriptbank.com/amazing-bounce-effect-using-jquery-framework.html
Loại hiệu ứng nẩy bật tuy đã được giới thiệu khá nhiều trên jsB@nk.com, nhưng hầu hết chúng là các hiệu ứng thuần JavaScript, chẳng hạn như: - Con chuột 'dây cao su' - Bóng bật tự do - Trò chơi trọng lựcHôm nay, xin giới thiệu với bạn một hiệu ứng JavaScript về bật nẩy nữa, nhưng có sử dụng thư viện jQuery nên dễ dàng chỉnh sửa và thay đổi hướng di chuyển và độ bật của đối tượng hơn.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Hiệu ứng nẩy bật tuyệt đẹp với jQuery
URL: https://www.javascriptbank.com/amazing-bounce-effect-using-jquery-framework.html
<STYLE type="text/css">body, input{font-family: Calibri, Arial;}div {padding:5px;width:150px;height:100px;text-align:center;}#bouncy1 {background-color:#FFEE88;}#bouncy2 {background-color:#EE88FF;}#bouncy3 {background-color:#EE8888;}#bouncy4 {background-color:#88EEFF;}</STYLE><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><SCRIPT>$(function(){//Add bounce effect on Click of the DIV$('#bouncy1').click(function () { $(this).effect("bounce", { times:5 }, 300);});$('#bouncy2').click(function () { $(this).effect("bounce", { direction:'left', times:5 }, 300);});$('#bouncy3').click(function () { $(this).effect("bounce", { direction:'right', times:5 }, 300);});$('#bouncy4').click(function () { $(this).effect("bounce", { direction:'down', times:5 }, 300);});//Bounce all DIVs on click of button$("#bounceAll").click(function(){$("div").click();});});</SCRIPT><table><tr><td><div id="bouncy1">Click here to bounce. Direction: Up</div></td><td><div id="bouncy2">Click here to bounce. Direction: Left</div></td></tr><tr><td><div id="bouncy3">Click here to bounce. Direction: Right</div></td><td><div id="bouncy4">Click here to bounce. Direction: Down</div></td></tr></table><br/><input id="bounceAll" type="button" value="Click to Bounce All!"/>