创意模板视频素材
软件工具网络教程

如何给网站文章页添加A+缩放字号按钮

如何给网站文章页添加A+缩放字号按钮软件下载

我们看到一些网站的文章页面标题旁边,有一个A+图标,点击便可以放大文章内容的字体字号,A-按钮则缩小回原来默认设置,对于近视800度的用户再也不用盯着屏幕看的眼花了,这点用户体验还是挺不错的,具体是这样的形式演示请参照知更鸟主题或者以下图片展示!

如何给网站文章页添加A+缩放字号按钮高清图-第1张

如何给网站文章页添加A+缩放字号按钮?方法非常简单(代码整自知更鸟),就三个步骤完美解决问题。第一步先在你的网站主题文章页single.php模板中添加展示按钮的代码,我这里就把以下代码放在标题下的时间分类的信息栏后,至于你想放哪自己调整即可,记住这个id=”fontsize”,下面CSS样式接JS解释用到。

<ul id="fontsize"><li>A+</li></ul>

给网站添加A+缩放字号按钮第二步,给这个按钮添加CSS样式,加在你的主题style.css文件,有的是main.css里面;至于要怎么调整你自己敲下CSS吧;这里依然贴出我改的样式,我把它放到整个文章页面左上角。

/** 字号 **/
#fontsize {
position: absolute;
top: 3px;
left: 3px;
line-height: 24px;
width: 40px;
text-align: center;
padding: 0 0 1px 0;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 2px;
}

#fontsize:hover {
color: #fff;
background: #3690cf;
border: 1px solid #3690cf;
}

.fontsmall {
font-size: 18px;
font-size: 1.8rem;
}

.fontlarge {
}

/** END **/

给网站添加缩放字体大小按钮第三步,加个JS控制按钮控制字体大小展示立马搞定。这里我在single.php后footer前添加。这里第二行的#fontsize即是控制上面的按钮,然后把代码第四行.article-content改为你要控制字体大小的区域class类,其它不用动。

<script type="text/javascript">

$("#fontsize").click(function() {
var _this = $(this);
var _t = $(".article-content");
var _c = _this.attr("class");
if (_c == "size_s") {
_this.removeClass("size_s").addClass("size_l");
_this.text("A+");
_t.removeClass("fontsmall").addClass("fontlarge");
} else {
_this.removeClass("size_l").addClass("size_s");
_this.text("A-");
_t.removeClass("fontlarge").addClass("fontsmall");
};
});

</script>
转载请注明来源:AEOMO » 如何给网站文章页添加A+缩放字号按钮
赞(4) 打赏 分享
本文共计1256字,阅读完成预计会占用您4分钟。 您在本页面已停留: 百度未收录

发表评论 3

3 + 6 =
  • *
  • *
  • *
  • *
  1. 李峰博客
    李峰博客 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_3 湖北省十堰市 电信 1个月前 (10-04 18:03)  地板回复

    你这网站改的挺有意思 哈哈

    • Able
      Able 来自天朝的朋友 谷歌浏览器  1809-A01 Build/OPM1 广东省 移动 1个月前 (10-04 18:29) 回复

      @李峰博客 哈哈!你的网站也非常不错呀!

  2. boke112导航
    boke112导航 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信 3个月前 (08-08 11:42)  板凳回复

    其实主要站点设置的字体大小合理,一般很少有人会去点击这个调整字体的按钮,除非遇到有老年人访问,需要放大字体。

  3. 周松松
    周松松 未知系统 谷歌浏览器  Android 5.1 OPPO A59m Build/LMY47I IANA保留地址 3个月前 (08-05 11:07)  沙发回复

    这是干货啊,支持

感谢热心朋友们的打赏

支付宝扫一扫打赏

微信扫一扫打赏