Hiệu ứng show ảnh từ jQuery
Thứ Bảy, 27 tháng 6, 2009
[FD's BlOg] - Với thủ thuật này, khi bạn rê chuột vào ảnh thu nhỏ, thì sẽ xuất hiện hiệu ứng zoom ảnh, cho bạn 1 ảnh có kích thước lớn hơn, tùy vào việc bạn tùy chỉnh độ lớn của hiệu ứng zoom. Thủ thuật này mình tham khảo từ trên mạng và đã có 1 chút chỉnh sửa để các bạn có thể tùy chỉnh hợp lý hơn.Xem demo ở đây : http://data.fandung.com/blog/demo/resize-image/index.html
Ảnh minh họa :
Như đã nói ở trên, thủ thuật này mình có 1 chút chỉnh sửa so với thủ thuật gốc. Ở thủ thuật gốc, các ảnh đều có vị trí tuyệt đối (position:absolute;) như nhau, nên nếu để nhiều ảnh gần nhau, khi zoom 1 ảnh nào đó thì ảnh zoom sẽ bị các ảnh thu nhỏ khác đè lên, và mình đã sửa 1 chút code CSS để chỉ tạo vị trí tuyệt đối cho ảnh khi rê chuột (khi zoom), như thế các ảnh zoom lên sẽ không bị đè.
Và điều thứ 2 mình chỉnh sửa là tỉ lệ zoom ảnh, ở thủ thuật gốc, tỉ lệ này được tính bằng tỉ lệ của độ rộng chia cho chiều cao (width/height), và với cách tính này, các ảnh có độ rộng và chiều cao bằng nhau (tức ảnh hình vuông - hệ số zoom =1) thì hiệu ứng zoom ảnh sẽ không hiển thị. Ngoài việc sửa đổi như vậy, mình còn đưa biến mpx (hệ số zoom) ra ngoài file JS để các bạn có thể tùy chỉnh theo ý thích của mình.
☼ Bắt đầu thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa code HMTL
3. Chèn code bên dưới vào trước thẻ đóng </head>
<style type="text/css">
img.resize{
width:100px;
height:67px;
border:1px solid #ccc;
padding:2px;
z-index:1;
}
img.resize:hover{
position:absolute;
}
</style>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/resize-image/jquery.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/resize-image/functions.js"></script>
<script type="text/javascript">
var mpx = 2;
</script>
Lưu ý :
Code CSS :
- width:100px; , height:67px; : kích thước của ảnh thu nhỏ
Code JS :
- var mpx = 2; : thay đổi tỉ lệ zoom ảnh theo ý bạn. Có thể dùng tỉ lệ không nguyên, ví dụ : 1.5 , 2.3, ...
4. Save template.
- Và khi muốn chèn hiệu ứng này cho ảnh, ta chỉ cần thêm đoạn code màu đỏ vào trong thẻ <img> đó là xong (như bên dưới)
<img src="{Link ảnh}" class="resize" />
Tác giả thủ thuật : Justin Farmer
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét