Rumah  >  Artikel  >  hujung hadapan web  >  Contoh lengkap pelaksanaan js bagi kemahiran function_javascript saiz teks artikel

Contoh lengkap pelaksanaan js bagi kemahiran function_javascript saiz teks artikel

WBOY
WBOYasal
2016-05-16 16:32:151602semak imbas

Contoh dalam artikel ini menerangkan kaedah menggunakan js untuk merealisasikan fungsi saiz fon teks artikel. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Teks besar, sederhana dan kecil adalah fungsi yang disediakan oleh banyak laman web untuk kemudahan pengguna dalam membaca Fungsi saiz fon besar, sederhana dan kecil yang diperkenalkan dalam artikel ini boleh dihidupkan selepas pengguna memilihnya satu lagi artikel dibuka di laman web yang sama, saiz fon akan dipaparkan mengikut kebiasaan pengguna.

Anda pasti pernah melihat tiga butang "Besar", "Sederhana" dan "Kecil" di bawah tajuk artikel di beberapa tapak web yang besar, yang digunakan untuk memenuhi tabiat membaca orang yang berbeza. Di sini saya akan memperkenalkan kaedah ini, dan ia menyokong penjimatan automatik berbanding dengan mereka Hanya pilih sekali, dan ia akan menyesuaikan secara automatik kepada saiz fon kegemaran anda pada masa akan datang.

Bahagian kod JS:

Mula-mula masukkan JS berikut ke dalam fail JS atau teg skrip:

Salin kod Kod adalah seperti berikut:
jQuery.cookie = fungsi(nama, nilai, pilihan) {
Jika (jenis nilai != 'tidak ditentukan') {
pilihan = pilihan || {};
Jika (nilai === null) {
              nilai = '';
options.expires = -1;
}
      var tamat tempoh = '';
Jika (options.expires && (typeof options.expires == 'nombor' || options.expires.toUTCString)) {
          tarikh var;
Jika (jenis pilihan. tamat tempoh == 'nombor') {
tarikh = new Date();
date.setTime(date.getTime() (options.expires * 24 * 60 * 60 * 1000));
              } lain {
Tarikh = options.expires;
            }
expires = '; expires=' date.toUTCString();
}
        var path = options.path '; path=' options.path : '';
        var domain = options.domain '; domain=' options.domain : '';
        var secure = options.secure ?            document.cookie = [nama, '=', encodeURIComponent(value), tamat tempoh, laluan, domain, secure].join('');
} lain {
        var cookieValue = null;
Jika (document.cookie && document.cookie != '') {
               var cookies = document.cookie.split(';');
untuk (var i = 0; i < cookies.length; i ) {
              var cookie = jQuery.trim(cookies[i]);
Jika (cookie.substring(0, name.length 1) == (nama '=')) {
                       cookieValue = decodeURIComponent(cookie.substring(name.length 1));
rehat;
                }
            }
}
          pulangkan nilai kuki;
}
};
fungsi SetFont(saiz){
$.cookie('Font_size', saiz, { tamat tempoh: 99999999 });
$(".context").css("font-size",size);//.context digantikan dengan bekas kandungan artikel anda
};
$(dokumen).sedia(fungsi(){
SetFont( $.cookie('Font_size') 'px' );
});

Ganti .konteks kod dengan bekas kandungan artikel anda.

Bahagian kod html:

Kemudian hubungi kod berikut jika perlu:

Salin kod Kod adalah seperti berikut:

Anda boleh menyesuaikan saiz fon dan teks dalam fungsi SetFont().

Saya harap artikel ini akan membantu pengaturcaraan web semua orang berdasarkan JavaScript.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn