رفتن به مطلب

تغییر اندازه فونت ها با استفاده از جی کوئری


majid_kiani

پست های پیشنهاد شده

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

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

1

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


<p class="intro">وردپرس پارسی </p>

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

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


<script type='text/javascript' src='http://demo.mihanlearn.com/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>[/color][/font][/color]
[color=#000000]

لینک به ارسال
مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...