如何实现网页中可以放大内容的代码

这个标题是个伪命题,是不通的,简单的讲就是可以放大网页的内容,根据需要进行阅读,可以解决个人需求的问题,比如我现在近视眼,呵呵希望比较大的字体,感觉很舒服不那么费眼睛,废话少说,还是为网站添加上行该功能吧。

一、使用Javascript实现

本代码仅仅实现此功能,至于样式请自己修改。

在网站合适的位置,为什么是合适的位置呢?根据需要呗,建议放置在<head>里面

<script type="text/javascript">

   function doZoom(size) {

       var zoom = document.all ? document.all['Zoom'] : document.getElementById('Zoom');

       zoom.style.fontSize = size + 'px';

   }

</script>

然后在合适的位置,调用doZoom(size) 这个函数即可,为什么又是合适的位置,呵呵举个例子说明吧。

这些文字放置在文章<body>之间吧(个人建议而已)

字体:<a href="javascript:doZoom(14)">[小]</a> <a href="javascript:doZoom(16)">[中]</a> <a href="javascript:doZoom(18)">[大]</a>

问题来了,注意看 doZoom(size)中有个参数Zoom,记得是调用文章内容的ID号,啥是ID号,去学CSS吧,不多讲,继续例子。

看这段代码,根据$log_content我判断是调用的内容。

<div class="post-context">

<i class="icon-quote"></i><?php echo $log_content; ?>

</div>

上面不是说要ID号啊,ID呢?没有啊,没有啊你加一个嘛,当然有了直接调用即可,变成以下这样不就可以了吧。

<i  ID="Zoom"  class="icon-quote"></i><?php echo $log_content; ?>

我加了个ID="Zoom",注意哦ID号的内容要和前面的doZoom(size) 里面调用参数保持一致哦。当然你也可以改成任意你想改的内容。

二、使用 jQuery

jQuery 和javascript我们就不讨论了,这里不多说,看代码(放置<head></head>之间哦)

<!-- 引入jQuery -->

<script src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js" type="text/javascript"></script> (这个地址嘛可以自己下载下来)

<script type="text/javascript">

$(function(){

$("span").click(function(){

var thisEle = $("#para").css("font-size");

var textFontSize = parseFloat(thisEle , 10);

var unit = thisEle.slice(-2); //获取单位

var cName = $(this).attr("class");

if(cName == "bigger"){

if( textFontSize <= 22 ){

textFontSize += 2;

}

}else if(cName == "smaller"){

if( textFontSize >= 12 ){

textFontSize -= 2;

}

}

$("#para").css("font-size", textFontSize + unit);

});

});

</script>


分割线,把以下内容放到适当的地方

<span class="bigger" >放大</span>

<span class="smaller" >缩小</span>


然后………………

<i  ID="para"  class="icon-quote"></i><?php echo $log_content; ?>

还是看此代码,ID号码改成 para,为啥呢?var thisEle = $("#para").css("font-size"); 看到否,#号里面就是ID号码,

呵呵,都可以实现此功能,不信,看本网站就这样实现的。

可能你对以下的内容也感兴趣:

思源黑体(Source Han Sans)下载

党政公文字体包下载

文悦古体仿宋计算机字体发布|一款制作古书的字体

TrueType字体作用|如何在文档嵌入 TrueType 字体中

火热榜

发表评论

    微笑 大笑 拽 大哭 奸笑 流汗 喷血 生气 囧 不爽 晕 示爱 卖萌 吃惊 迷离 爱你 吓死了 呵呵

      已有2条评论

    1. avatar 春熙路沙发
      这个可以有的,不过现在大都不用网页了、一般都是手机浏览的2017-12-27 19:04 回复
      1. avatar老罗
        回复了春熙路:手机上也要放大的嘛,效果同样,现在不知道是老了,还是咋个回事,就喜欢大字体,看起来不费力 2017-12-29 17:46 回复