Tạo chức năng tăng giảm kích thước font chữ bằng JQuery

Có thể một vài bạn sẽ nghĩ ngay rằng chức năng này không cần thiết nữa, nhất là khi chúng ta có thể phóng to thu nhỏ ngay trên trình duyệt. Tuy  nhiên cách đó sẽ phá hỏng những thiết kế của các bạn. Trong bài viết này, mình sẽ chỉ tập trung vào phần javascript, còn phần HTML và CSS chỉ là phần cơ bản.

Xem Demo | Download

1 HTML
Các bạn chỉ cần dùng khung chuẩn html như sau :

    <a href="#" class="fontSizePlus">A+</a> |
    <a href="#" class="fontReset">Reset</a> |
    <a href="#" class="fontSizeMinus">A-</a>

2 CSS

Chúng ta chỉ cần định dạng màu chữ là okie.

a {
    color:#c00;
    text-decoration:none;
}
a:hover {
    color:#f00;
    text-decoration:underline;
}

3 Javascript

Cuối cùng là đoạn javascript giúp chúng ta tạo chức năng, mình có ghi chú thích từng câu lệnh, vì thế các bạn đọc sẽ dễ hiểu.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // kích thước font chữ tối thiểu
        var min=9;
        //kích thước font chữ tối đa
        var max=16;

        // lấy font chữ mực định
        var reset = $('p').css('fontSize');

        //những phần tử sẽ thực hiện khi chức năng được gọi
        var elm = $('p.intro, p.ending');

		// ấn định kích thước font chữ mặc định và xóa bỏ px từ giá trị
        var size = str_replace(reset, 'px', ');

		//Tăng kích thước font chữ
	$('a.fontSizePlus').click(function() {

		// Nếu kích thước font chữ nhở hơn hoặc bằng với giá trị tối đa thì
		if (size<=max) {

			// tăng kích thước
			size++;

			// ấn định kích thước font cho phần tử
			elm.css({'fontSize' : size});
		}

		// hủy sự kiện click
		return false;

	});
		// Giảm kích thước font
	$('a.fontSizeMinus').click(function() {

		// nếu kích thước font chữ lớn hơn hay bằng với giá trị tối thiểu
		if (size>=min) {

			//giảm kích thước
			size--;

			// ấn định kích thước font cho phần tử
			elm.css({'fontSize' : size});
		}

		// hủy sự kiện click
		return false;

	});

	// khôi phục lại kích thước mặc định
	$('a.fontReset').click(function () {

		// ấn định kích thước font chữ mặc định
		 elm.css({'fontSize' : reset});
	});

});

//hàm thay đổi chuỗi
function str_replace(haystack, needle, replacement) {
	var temp = haystack.split(needle);
	return temp.join(replacement);
}
</script>

Mình hy vọng với bài viết đơn giản này, các bạn sẽ có thêm kinh nghiệm cũng như kiến thức sử dụng jQuery, cũng như có thêm chức năng cho website hay blog của mình.

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster