点击放大或减小字体的功能实现
在实际的网站建设工作中,经常有一些细节的功能,比如网站的字体有时客户需要放大看,假如网站里面有这样的功能,客户的体验会明显增强,那究竟如何实现这样的放大减小的功能呢?

今天我们使用js来实现,闲话休提,直接上js代码,具体如下:

var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}

当然上面的这一段代码要放在script标签中,大体里面的意思是实现放大或是缩小的功能,具体的代码今天在这儿不讲解,我们的目的就是让你立马懂得去实现功能,至于为什么,自己可以去研究研究。

上面是第一步,接着第二步就是布局好要点击的文字或图片,当用户点击这个“放大字体”或是“减小字体”的字样的时候,触动js代码,让某段文字或区域的字体加大或减小,第二步代码就很随意了,每个网站都是不一样的,只要记得链接的地址就行。

<table width="680" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<a href="javascript:ts('td01',1)">+ 放大字体</a>

<a href="javascript:ts('td01',-1)">- 减小字体</a>
</td>
</tr>
</table>

关于上面代码,只要记住放大链接的是:javascript:ts('td01',1),然后减小链接的是:javascript:ts('td01',-1)。

好了,再下面第三步要考虑的就是点击放大减小字体后,让哪个区域div或class或id的文字字体发生变化,只需要在某段文字外面加个id,也就是说,在body里面,可以放些诸如id="td01"这样的:

<div id="td01">这里面放置的是要改变字体大小的文字</div>

总结一下,上面分为三步,第一步,要将js代码放入script标签中,可以放在head文件中,也可以放入body中。

第二步,放置待点击放大缩小的文字或图片字样,各个网站情况不一样,只需记得放大缩小的两个链接,即javascript:ts('td01',1)与javascript:ts('td01',-1)。

第三步,在body中,把要放大缩小的文字放在id为td01的div或table中。

就这样简单,放大或减小字体的功能实现,懂了吗,希望会帮助到大家。


下一条:不要相信与害怕要求续费的陌生公司
网站套餐/客户案例/公司优势/域名主机/企业邮箱/网站推广/关于我们/返回首页
版权所有:南京希丁哥网络信息服务有限公司