我正在将文本水印应用到多个图像上，我想显示文本的缩放比例。我根据 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});
});
});
上面的代码在水平缩放的情况下工作正常，但在垂直缩放的情况下不能得到精确的缩放。请指出正确的方向
最佳答案
您可以使用 jquery 调整大小插件来调用 div 调整大小事件。您将从以下链接获得此插件
http://benalman.com/projects/jquery-resize-plugin/
我通过从前一个高度减去 currentHeight 来检查高度变化的比例。为此，我从高度参数中删除了“px”值。那么如果是增加字号，那么我会根据高度的变化率，以相似的比例增加字号，否则我会减小字号。
但是在执行过程中遇到了一些问题。当我更改字体大小时，它也在调整 div 的大小，因此它再次调用调整大小事件，它变成了一个无限循环。所以我使用了一个名为 resi(resize 的缩写)的 bool 变量，当完成字体大小调整后，我将其设置为 true，因此下次我调用调整大小方法时，它将跳过函数的执行
<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 的大小。 如果你有任何疑问，你可以问。
关于jquery - 根据div高度放大字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23485515/