Tạo hiệu ứng rung rinh cho ảnh khi rê chuột

Thứ năm, ngày 23 tháng chín năm 2010

Bạn có muốn những tấm ảnh trên blog của mình có những hiệu ứng thật vui khi rê chuột vào chúng không. Vâng một thủ thuật mà mình sắp giới thiệu đến các bạn là tạo hiệu ứng cho ảnh khi rê chuột lên ảnh đó. Với thủ thuật này, mỗi khi bạn rê chuột vào ảnh thì chúng sẽ lắc lư, rung ring rất vui mắt. Nếu bạn cảm thấy thích thú với những động tác của ảnh như vậy và muốn tạo hiệu ứng này trên blog mình thì bạn có thể thực hiện theo vài bước đơn giản bên dưới. Bạn hãy click vào demo bên dưới và rê chuột vào ảnh sẽ thấy kết quả hiệu ứng này.
Xem DEMO


1. Đầu tiên bạn đăng nhập vào tài khoản
2. Vào phần thiết kế chọn chỉnh sửa HTML
3. Thêm code bên dưới vào sau thẻ <head>

<style>
.shakeimage{
position:relative
}
</style>

<script src=’http://traidatmui-tips.googlecode.com/files/shakeImage.js‘ type=’text/javascript’/>

4. Sau khi thêm code xong bạn save template lại.
5. Đến đây là bước ứng dụng thủ thuật, nếu bạn muốn ảnh có hiệu ứng của thủ thuật này bạn phải thêm một lớp Class vào thẻ IMG như bên dưới

<a href=”http://nvdinh88.blogspot.com/” target=”_blank”><img class=”shakeimage” onmouseover=”init(this);rattleimage()” onmouseout=”stoprattle(this);top.focus()” onclick=”top.focus()” src=”http://lh6.ggpht.com/_BTztXRwC9ik/TJsl23XHNII/AAAAAAAAD2E/W923JxWh6EM/Image1.gif” align=”middle” /></a>

Như vậy là bạn có thể có hiệu ứng lắc lư cho ảnh khi rê chuột trên blog của bạn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *