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>

  • 相关阅读:
    Spring Boot 环境变量读取 和 属性对象的绑定
    SpringMvc(4-1)Spring MVC 中的 forward 和 redirect(转)
    shiro实现登录安全认证(转)
    史上最全的开发工具类(转)
    Shiro权限管理框架详解
    js中退出语句break,continue和return 比较 (转)
    jQuery获取多种input值的方法(转)
    jquery常用方法总结(转)
    jQuery常用方法(持续更新)(转)
    idea+springboot+freemarker热部署(转)
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4549033.html
Copyright © 2011-2022 走看看