点击按钮实现文字放大缩小显示js特效

拖动小箭头或点击按钮能使网页文字放大或缩小显示效果，很方便的一个文字放大网页特效，结合自己的需求来修改即可。

<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
MM_reloadPage(true);
var fsize=12;
var dx;
var n;
function changesize(c) {
if (c==1) {
if (fsize>0) {fsize--;}
else {}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
else {fsize++;}
fonts.innerHTML = fsize + 'px';
content.style.fontSize=fsize;
}
function dragslide() {
if (n==1) {
var x=document.body.scrollLeft+event.clientX;
if ((x-dx)<102&&(x-dx)>0)
{
handle.style.left=x-dx;
fsize=x-dx+11;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
else if ((x-dx)>101) {
handle.style.left=101;
fsize=112;
}
else if ((x-dx)<1) {
handle.style.left=1;
fsize=12;
}
fonts.innerHTML = fsize + 'px';
content.style.fontSize=fsize;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function dragstart() {
n=1;
dx=document.body.scrollLeft+event.clientX-handle.offsetLeft;
handle.setCapture();
}
function dragend() {
n=0;
handle.releaseCapture();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
<style type="text/css">
<!--
.button { height: 14px; width: 14px; font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; line-height: 10px}
.border { border-color: #000000 black; border-style: solid; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}
.shadow { filter: DropShadow(Color=#000000, OffX=2, OffY=1, Positive=1)}
-->
</style>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="14" height="14">
<input type="button" name="Button" value="-" onClick=changesize(1) class="button" onfocus="this.blur()">
 </td>
<td width="112">
<div id="bar" style="font-size:5px;position:relative; width:112px; height:11px; z-index:1; background-color: #D4D0C8; layer-background-color: #D4D0C8; border: 1px none #000000; left: 0px; top: 3px ; " >
<div id="handle" style="font-size:12px;color:#CDC9C0;cursor: w-resize;position:absolute; width:8px; height:9px; z-index:1; top: 6px; left: 1px" class="shadow" onmousedown="dragstart()" onmousemove="dragslide()" onmouseup="dragend()">▲</div>
</div>
</td>
<td width="14">
<input type="button" name="Submit2" value="+" onClick=changesize(2) class="button" onfocus="this.blur()">
</td>
<td valign="bottom"><span id="fonts" style="font-size:12px;">12px</span></td>
</tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="content" style="font-size:12px">各种信息免费发布，资源共享合作共赢。</td>
</tr>
</table>