zoukankan      html  css  js  c++  java
  • 改变文章的字号大小

    之前在做一个单页的时候,有要用到这个功能,现在终于有空把它分享出来,并简单介绍下其实现原理及方法。

    这个功能经常用在文章页,用于改变文章字体的大小,所以这也不是啥新鲜事了哈,那么写这篇文章的目的就是记录下自己对其的一些理解。

    其实它的工作原理很简单,就是在触发事件的时候将文章的字号改变,更直白一些就是改变font-size这个属性的值(jQuery版本1.7.2)

    HTML

    <div class="box">
        <div class="ctrl">
            <a href="javascript:;">放大</a>
            <a href="javascript:;">缩小</a>
            <a href="javascript:;">默认</a>
        </div>
        <div class="cont">这里是一些文字</div>
    </div>

    CSS

    .box{text-align:center;}
    .ctrl{padding:50px 0px 0px 0px;background:#f4f4f4;font-size:0px;border-bottom:3px solid #333;}
    .ctrl a{display:inline-block;width:50px;height:30px;line-height:30px;background:#333;color:#fff;font-size:14px;}
    .ctrl a:hover{background:#444;color:#fff;font-weight:700;text-decoration:none;}
    .cont{padding-top:50px;font-size:14px;}

    JS

    $(function(){
        function sizeIn(){
            var sizeCont = parseInt($(".cont").css("fontSize")); // 获取原设定的font-size的值
            if(sizeCont == 30){ // 判断font-size增大到30像素时停止
                $(".cont").css({fontSize:sizeCont});
            }else{
                $(".cont").css({fontSize:sizeCont + 1});
            }
        }
        function sizeOut(){
            var sizeCont = parseInt($(".cont").css("fontSize"));
            if(sizeCont == 10){ // 判断font-size减小到10像素时停止
                $(".cont").css({fontSize:sizeCont});
            }else{
                $(".cont").css({fontSize:sizeCont - 1});
            }
        }
        function sizeDefault(){
            $(".cont").css({fontSize:""})
        }
        $(".ctrl a").click(function(){
            if($(this).index() == 0){
                sizeIn();
            }else if($(this).index() == 1){
                sizeOut();
            }else{
                sizeDefault();
            }
    
        })
    });

    转:http://gongxinjun.com/blog/1788.html

  • 相关阅读:
    反编译工具
    3.25Java变量
    标识符
    OMS系统
    java打印方法区别
    注释
    写代码时候要注意的两个点
    python_pracyoce_day1
    SKU和SPU
    文档注释
  • 原文地址:https://www.cnblogs.com/leejersey/p/3359700.html
Copyright © 2011-2022 走看看