Tạo hiệu ứng cho ảnh imageWarp với Jquery

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Mình đã giới thiệu cho các bạn cách tạo lightbox cho ảnh, hôm nay mình sẽ giới thiệu cho các bạn một thủ thuật tao hiệu ứng cho ảnh nữa đó là hiệu ứng "Image warp". Hiệu ứng này sử dụng Jquery, hiệu ứng này nó sẽ làm cho hình ảnh của bạn tăng kích cở lên khi bạn click vào ảnh đó trong một khoảng thời gian ngắn, sau đó sẽ trả hình ảnh về kích cở ban đầu.


Các bước để thực hiện

1. Bạn hãy đăng nhập vào blogger
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/hover_warp_img.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($){
$('img.imagewarp').imageWarp()})
</script>

4. Để sử dụng hiệu ứng này thì bạn phải thêm vào thẻ "Image" một class="imagewarp" như bên dưới
<a href="http://nvdinh88.blogspot.com/"><img src="http://lh6.ggpht.com/_BTztXRwC9ik/S4tj4lnAcrI/AAAAAAAAANw/vwXqEQJYh-c/s640/2009_11_21%5E13_31_42.jpg" class="imagewarp" style="width:200px; height:150px;" border="0"/></a>

Thay link màu xanh thành link ảnh và đường dẫn của bạn
Chúc thành công

Không có nhận xét nào