آموزشی تغییر اندازه فونت با این کد در قالبتان

[Amir. 1561]

تغییر اندازه فونت های صفحه سایت یکی از قابلیت هایی است که می توان با استفاده از جی کوئری به راحتی بر روی سایت پیاده کرد.

برای استفاده از این اسکریپت ابتدا ساختار HTML مون رو به صورت زیر قرار می دیم :

<p class="intro">مدرسه وب ایران ، آموزش های طراحی وب </p>

توجه داشته باشید که توی کد بالا مهم کلاسی هست که به المنت p مون می دیم. در واقع هر تگ p که با کلاس intro توی صفحه باشه فونتش تغییر خواهد کرد.

کدهای جی کوئری زیر رو هم داخل تگ head صفحه مون قرار می دیم.

<script type='text/javascript' src='http://demo.codedrive.ir/base/js/jquery.min.js'></script>

<script type="text/javascript">
$(document).ready(function () {

	//min font size
	var min=9;  

	//max font size
	var max=16;

	//grab the default font size
	var reset = $('p').css('fontSize');

	//font resize these elements
	var elm = $('p.intro');  

	//set the default font size and remove px from the value
	var size = str_replace(reset, 'px', '');

	//Increase font size
	$('a.fontSizePlus').click(function() {

		//if the font size is lower or equal than the max value
		if (size<=max) {

			//increase the size
			size++;

			//set the font size
			elm.css({'fontSize' : size});
		}

		//cancel a click event
		return false;  

	});

	$('a.fontSizeMinus').click(function() {

		//if the font size is greater or equal than min value
		if (size>=min) {

			//decrease the size
			size--;

			//set the font size
			elm.css({'fontSize' : size});
		}

		//cancel a click event
		return false;  

	});

	//Reset the font size
	$('a.fontReset').click(function () {

		//set the default font size
		 elm.css({'fontSize' : reset});
	});

});

//A string replace function
function str_replace(haystack, needle, replacement) {
	var temp = haystack.split(needle);
	return temp.join(replacement);
}
</script>

توی خط ۱۶ کد بالا می تونید سلکتورتون رو تغییر بدین.

موفق باشید.

پیش نمایش دانلود