Question

我正在将文本水印应用于多个图像，我想显示文本的缩放。我根据div放大font-size，将div和文本放大到它们中这就是我正在做的jsfiddle

$(document).ready(function () {

  //vertically enlarge div and font-size     
    $('#vertically').on('change', function() {
        ScaValue = this.value;
        OriginalHeight = $("#backgroundImg").height();
        var newHeightofDiv  = (OriginalHeight/100) * ScaValue;
        fontsize = newHeightofDiv/10;
        $("#dragable").css({"width":"auto","height":newHeightofDiv,"font-size":fontsize});
  });


        //horizontally enlarge div and font-size 
    $('#horizontally').on('change', function() {
        ScaValue = this.value;
        Originalwidth = $("#backgroundImg").width();
        var newWidthofDiv  = (Originalwidth/100) * ScaValue;
        fontsize = newWidthofDiv/10;
        $("#dragable").css({"width":newWidthofDiv,"height":"auto","font-size":fontsize});
  });


});

上面的代码在水平缩放的情况下工作正常，但在垂直缩放的情况下不能得到精确的缩放。请指出我正确的方向

Answer 1

您可以使用jquery resize插件来调用div resize事件。您将从以下链接获得此插件

http://benalman.com/projects/jquery-resize-plugin/

我通过从前一个高度减去currentHeight来检查高度变化的比例。为此，我从height参数中删除了'px'值。然后，如果它的大小增加，那么我将根据高度的变化率以相似的比例增加字体大小，否则我将减小字体大小。

但这样做时有一些问题。当我改变了字体大小时，它也调整了div的大小，所以它再次调用了resize事件，它变成了一个无限循环。所以我使用了一个名为resi的boolean变量（resize的缩写），当字体调整大小完成后我将其设置为true，所以下次调用resize方法时它会跳过函数的执行

    <html>
    <head>

    </head>
    <body>
     <div id="mydiv" style="min-height:300px;font-size:23px;border:solid 2px black;">
         Hai I am Akhil
         <div id="inner" style='height:200px;border:solid 2px red;'></div> 
         </div>
      </div>
     <input type="button" id="check" value="Increase"/>
     <input type="button" id="down" value="Decrease"/>
     <script  src="jquery-1.11.1.js"></script>
     <script  src="jquery-resize.js"></script>
     <script>
       var height=$("#mydiv").css("height");
       height=height.substring(0,(height.length-2));
       var font=$("#mydiv").css("font-size");
       var resi=false;
       $("#mydiv").resize(function(){
            if(resi){
                 var currentHeight=$("#mydiv").css("height");
                 currentHeight= currentHeight.substring(0,(currentHeight.length-2));
                 var change=currentHeight-height;
                 height=currentHeight;
                 if(change>0){
                var currentFont=$("#mydiv").css("font-size");
                font=currentFont;
                      currentFont= currentFont.substring(0,(currentFont.length-2));
                $("#mydiv").css("font-size", ((currentFont*(change/100))+"px"));
                      resi=false;
                 }else if(change<0){
                change=change*-1;
                var currentFont=$("#mydiv").css("font-size");
                font=currentFont;
                      currentFont= currentFont.substring(0,(currentFont.length-2));
                $("#mydiv").css("font-size", ((currentFont/(change/100))+"px"));
                      resi=false;
                 }
              }
           });
          $("#check").click(function(){
                 $("#inner").css("height","600px");
                 resi=true;
          });
         $("#down").click(function(){
               $("#inner").css("height","400px");
               resi=true;
          });
       </script>
       </html>

我已经给出了2个按钮来增加和减小div的大小。如果你有任何疑问，你可以问。

根据div高度放大字体大小

1 个答案: