Cách làm zoom-in, zoom-out một vùng website
April 28th, 2012
Cho em hỏi: em muốn làm 2 nút: zoom-in và zoom-out cho phần bài viết trên website thì làm như thế nào? (Lưu ý: chỉ riêng khu vực bài viết thôi, các vùng khác vẫn giữ nguyên)
Chào Bạn,
Gợi ý cho bạn một cách này nhé: giả sử vùng bài viết của bạn được bao bọc bởi một thẻ div cóid là article, bạn hãy dùng jquery để truy cập vào các thẻ con nằm bên trong article để tăng giá trị fontSize của các thẻ con đó lên.
Cụ thể:
– B1: Bạn tạo 2 nút zoom-in, zoom-out bằng thẻ img, đồng thời đặt id cho chúng lần lượt là zoom-in, zoom-out
– B2: Bạn nhúng đoạn javascript sau vào trang web
<script language=”javascript”>
$(document).ready (function() {
$(‘#zoom-in’).click(function(){
$(‘#article *’).css(“fontSize”, function(index, value){
value = parseInt(value.replace(‘px’, ”)) + 1;
return value + ‘px’;
});
});
$(‘#zoom-out’).click(function(){
$(‘#article *’).css(“fontSize”, function(index, value){
value = parseInt(value.replace(‘px’, ”)) – 1;
return value + ‘px’;
});
});
}
</script>
Hướng dẫn sử dụng trước khi dùng:
+ Hãy chắc chắn là bạn đã include thư viện jquery vào rồi, nếu chưa có bạn có thể include thư viện jquery bằng cách sau:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>
+ Nếu bài viết của bạn được đặt trong một div có class là article thì bạn hãy đổi $(‘#article *’).css thành $(‘.article *’).css
+ Nếu bạn muốn zoom-in, zoom-out toàn website thì bạn hãy đổi $(‘#article *’).css thành$(‘*’).css
+ Xem demo tại đây: http://netvn.vn/posts/view/huong-dan-thanh-toan.html
