網(wǎng)站添加用戶切換字體大小功能（適用wordpress，dedecms）
2018-11-01 來(lái)源：學(xué)做網(wǎng)站論壇
做一些網(wǎng)站時(shí)，特別是門戶網(wǎng)站制作方法中，需要在文章頁(yè)面添加一個(gè)用戶切換字體大小功能，可以讓瀏覽器根據(jù)自己需要去調(diào)節(jié)文章字體的大小，符合用戶體驗(yàn)。效果如下圖：
下面講一下網(wǎng)站添加用戶切換字體大小功能的方法，這種方法適用于wordpress仿站，dedecms仿站教程。
- 在<head></head>標(biāo)簽之間添加以下js特效代碼：（<head>標(biāo)簽一般位于頭部文件head.php中）
<SCRIPT type=text/javaScript>
function doZoom(size){
document.getElementById('zoom').style.fontSize=size+'px'}
</SCRIPT> - 在文章頁(yè)面模板中需要顯示“字體：大 中 小”的地方添加以下代碼：（wordpress文章頁(yè)面模板：single.php ?/ ?dedecms文章頁(yè)面模板：article.html）
字體：<a href="javascript:doZoom(18)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
- 在文章內(nèi)容調(diào)用標(biāo)簽加上一個(gè)默認(rèn)的文字大小屬性。改成以下代碼：
wordpess:<span id="zoom" style="font-size:14px;">
<?php the_content(); ?>
</span>dedecms:
<span id="zoom" style="font-size:14px;">
{dede:field.body/}
</span> - 到這里為止，你自己做的網(wǎng)站就已經(jīng)擁有用戶切換字體大小功能。
標(biāo)簽： 代碼 網(wǎng)站制作
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
最新資訊
熱門推薦