zoukankan      html  css  js  c++  java
  • jQuery学习笔记3--网页字体变大变小

    效果图:

    js代码

      <script type="text/javaScript">
            $(function(){
                $(".msg_caption span").click(function(){  //当文档加载完毕后,为所有的<span>元素绑定单击事件
                    var thisEle = $("#para").css("font-size"); //获取ID为“para”元素的大小
                    var textFontSize = parseFloat(thisEle , 10);//或许返回值用parseFloat()方法去掉单位,第二个值表示10进制
                    var unit =thisEle.slice(-2); //或许单位 , slice指定字符串应该从倒数第2个字符开始。
                    var cName =$(this).attr("class"); //获取当前的class
                    if(cName == "bigger fl") { //if语句判断当前被点击的<span>元素的Class是否为 boigger
                        textFontSize += 2; //是的话字体变量增加2px
                    }else{
                      textFontSize -= 2; //字体变量减少2px
                    }
                  $("#para").css("font-size" , textFontSize + unit ); //再次获取para的字体值并且带上单位
                });
                
                
            });
        </script>

    HTML代码

    <div class="msg">
        <div class="msg_caption">
            <span class="bigger fl">放大</span>
            <span class="smaller fl ">缩小</span>
        </div>
        <div>
            <p id="para">
                This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.
            </p>
        </div>
    </div>

        <style type="text/css">
        a{ text-decoration: none; coor: #000;}
        .fl{ float:left;}
        .fr{ float:right;}
        .msg { 500px; border: 1px solid #ccc;}
        .msg_caption { 500px; overflow: hidden;}
        .msg_caption span { display: block; 50px; height: 20px; line-height: 20px; background: #666; color: #fff; text-align: center; margin-right: 20px; font-size: 12px; cursor: pointer;}
        
        </style>

  • 相关阅读:
    [转载] 十问 TiDB :关于架构设计的一些思考 TiDB
    blender low poly + unity 3d游戏制作
    d2js + activiti 备忘
    使用ActionFilterAttribute进行重定向注意事项
    一键发布部署vs插件[AntDeploy],让net开发者更幸福
    Docker常用命令
    C# 自然周,月,季度计算。
    .Net Core Web Api使用模型验证验证参数合法性
    WebApi 路由机制剖析
    WebApi路由机制详解
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4549033.html
Copyright © 2011-2022 走看看