Home » Thủ thuật blog
Hiệu ứng show ảnh từ jQuery
Thứ Bảy, 27 tháng 6, 2009

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.

- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
- Thêm chia sẻ Like và share bài viết cho blogspot [trên trang itviet360]
- Thêm nút theo dõi (Follow) cho blogspot
- Feedburner Google và cách lấy tùy chỉnh cho blogspot
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
Comments[ 0 ]
Đăng nhận xét