Thêm "trọng lực" vào website của bạn với jGravity
jGravity là một plugin của jQuery giúp thêm trọng lực vào tất cả các thành phần trên website của bạn (giống như 'Google Gravity').
Cách sử dụng
Tất cả những gì bạn cần là thêm đoạn mã $('body').jGravity(); để cho hiệu ứng thực thi. Bạn có thể gọi hàm jGravity với các phần tử khác nhưng sẽ tốt nhất với thẻ body. Phiên bản này được thử nghiệm với jQuery 1.7.2.
- Thêm jQuery và jGravity:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jGravity-min.js"></script>
- Gọi jGravity lên làm việc (cách gọi nâng cao):
$(document).ready(function() { $('div.jGravity').live('click', function() { // đặt sự kiện cho trọng lực xuất hiện $('body').jGravity({ target: 'everything', // Ở đây bạn có thể lọc ra những phần tử có trọng lực, ví dụ 'div, p, span', 'h2' hoặc 'div#specificDiv', và đơn giản là 'everything' để áp dụng tất cả các phần tử trong thẻ body ignoreClass: 'ignoreMe', // Chọn các phần tử không áp dụng trọng lực (được đặt một class css cho trước) weight: 25, // Chọn các giá trị từ 1 tới 100 (mặc định là 25), bạn cũng có thể dùng giá trị 'heavy' hoặc 'light' depth: 5, // Chọn các giá trị từ 1 tới 10 (mặc định là 1), giúp ngăn việc phần tử nào đó phá vỡ cấu trúc (chưa hiểu lắm) drag: true // Cho phép người dùng kéo thả các phần tử }); }); });
Test thử ở Firefox mới thì thấy không drag được (thay đổi kích thước trình duyệt thì các phần tử vẫn nhảy đi nhảy lại) nhưng IE10 thì chạy tốt, có thể plugin còn có lỗi trên Firefox, tuy nhiên đây vẫn là một plugin rất hay.