界面字体自适应控件大小和字体轮播

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles{
}

<button id="btnCH">中文</button>
<button id="btnVI">越南语</button>
<button id="btnEN">英语</button>

<div style="height:50px;"></div>

<table style="width: 100%; height: auto; padding: 0px 0px; border: 0px solid gray;">
    <tr style="height: 50px;margin-top:5px;background-color:green;">
        <td id="tddatainput" style="text-align:right; width:10%; font-size: large; font-weight: bolder;white-space: nowrap;">
            <div class="label-parent">
                <div class="label">语言国际化自适应</div>
            </div>
        </td>
        <td style="width: 90%; font-size: x-large; font-weight: bolder;">
            <input id="DataInput" onkeypress="checktxtssn();" class="txtscanclass" style="width:100%;max-width:100%; font-size: x-large; font-weight: bolder;" />
        </td>
    </tr>
</table>

<table style="width: 100%; height: auto; padding: 0px 0px; border: 0px solid gray;">
    <tr style="height: 50px;margin-top:5px;background-color:green;">
        <td id="tddatainput1" style="text-align:right; width:10%; font-size: large; font-weight: bolder;white-space: nowrap;">
            <div>
                <div class='marquee' style="font-size:75%;padding: .2em .6em .3em;">语言国际化自适应</div>
            </div>
        </td>
        <td style="width: 90%; font-size: x-large; font-weight: bolder;">
            <input id="DataInput" onkeypress="checktxtssn();" class="txtscanclass" style="width:100%;max-width:100%; font-size: x-large; font-weight: bolder;" />
        </td>
    </tr>
</table>

@*<div class="label-parent" style="width: 200px; height: 40px;white-space: nowrap;background-color:blue;">
        <div class="label" id="label1">语言国际化自适应</div>
    </div>*@
<div class="" style="width: 200px; height: 40px;white-space: nowrap;background-color:yellow;">
</div>
@section scripts{
    <script type="text/javascript">

        /* 缩放显示 */
        function fittext(element, elementMaxWidth, elementMaxHeight, maxFontSize, localizationText) {
            $('#' + element + ' .label-parent .label').html(localizationText);
            $('#' + element + ' .label-parent .label').css({
                'display': 'table-cell',
                'vertical-align': 'middle',
                'width': '100%',
                'max-width': elementMaxWidth,
                'height': elementMaxHeight,
                'max-height': elementMaxHeight,
                '-webkit-transform': 'scale(1)',
                'transform': 'scale(1)',
                'transform-origin': '0 ' + $('#' + element).height() / 2 + 'px'
            });
            $('#' + element + ' .label-parent').css({
                'display': 'table',
                'width': '100%',
                'max-width': elementMaxWidth,
                'height': '100%',
                'max-height': '100%',
                'line-height': '50px',
                'white-space': 'nowrap',
                //'background-color': 'blue',
                '-webkit-transform-origin': '100% 100%',
                'transform-origin': '100% 100%',
                'vertical-align': 'middle'
            });

            var c = $('#' + element + ' .label-parent');
            var tt = $('#' + element + ' .label-parent .label');
            var maxW = elementMaxWidth, maxH = elementMaxHeight, maxSize = maxFontSize;
            var d = document.createElement("div");
            d.style.backgroundColor = 'red';
            d.style.fontSize = maxSize + "px";
            d.style.display = 'inline-block';
            d.style.padding = $('#' + element + ' .label-parent .label').css('padding');

            for (var i = 0; i < tt.length; i++) {
                d.innerHTML = tt[i].innerHTML;
                document.body.appendChild(d);
                var w = d.offsetWidth;
                if (parseInt(w) > maxW) {
                    tt.css('width', w);
                    var h = d.offsetHeight;
                    document.body.removeChild(d);
                    var x = w > maxW ? maxW / w : 1;
                    var y = h > maxH ? maxH / h : 1;
                    var r = Math.min(x, y) * maxSize;

                    tt.css({
                        '-webkit-transform': 'scale(' + Math.floor(Math.min(x, y) * 10) / 10 + ')',
                        'transform': 'scale(' + Math.floor(Math.min(x, y) * 10) / 10 + ')',
                        'transform-origin': '0 ' + $('#' + element).height() / 2 + 'px'
                    });
                    tt.attr('title', localizationText);
                    c.css({
                        'display': 'inline-block'
                    });
                } else {
                    document.body.removeChild(d);
                    tt.css({
                        'font-size': maxSize + "px"
                    });
                    c.css({
                        'display': 'inline-block'
                    });
                }
            }
        }

        /* 滚动播放 */
        function fittext3(element, elementMaxWidth, elementMaxHeight, maxFontSize, localizationText) {
            $('#' + element + ' .marquee').html(localizationText);
            $('#' + element + ' .marquee').css({
                'width': elementMaxWidth,
                'overflow': 'hidden'        
            });
            var maxW = elementMaxWidth, maxH = elementMaxHeight, maxSize = maxFontSize;
            var tt = $('#' + element + ' .marquee');
            var d = document.createElement("div");
            d.style.backgroundColor = 'red';
            d.style.fontSize = maxSize + "px";
            d.style.display = 'inline-block';
            d.style.padding = $('#' + element + ' .label-parent .label').css('padding');

            for (var i = 0; i < tt.length; i++) {
                d.innerHTML = tt[i].innerHTML;
                document.body.appendChild(d);
                var w = d.offsetWidth;
                if (parseInt(w) > maxW) {
                    $('#' + element + ' .marquee').marquee({
                        //speed: 50,
                        //gap: 50,
                        //delayBeforeStart: 0,
                        //direction: 'left',
                        //duplicated: true,
                        pauseOnHover: true
                    });                    
                } else {
                    $('#' + element + ' .marquee').children().remove();
                }
                document.body.removeChild(d);
            }

        }

        $(function () {
            
            $("#btnCH").click(function () {
                fittext('tddatainput', $('#tddatainput').width(), $('#tddatainput').height(), $('#tddatainput').css('font-size'), '语言国际化自适应');
                fittext3('tddatainput1', $('#tddatainput1').width(), $('#tddatainput1').height(), $('#tddatainput1').css('font-size'), '语言国际化自适应');
            });
            $("#btnVI").click(function () {
                fittext('tddatainput', $('#tddatainput').width(), $('#tddatainput').height(), $('#tddatainput').css('font-size'), 'Thử nghiệm thích ứng ngôn ngữ\'');
                fittext3('tddatainput1', $('#tddatainput1').width(), $('#tddatainput1').height(), $('#tddatainput1').css('font-size'), 'Thử nghiệm thích ứng ngôn ngữ\'');
            });
            $("#btnEN").click(function () {
                fittext('tddatainput', $('#tddatainput').width(), $('#tddatainput').height(), $('#tddatainput').css('font-size'), 'Language internationalization adaptive testing');
                fittext3('tddatainput1', $('#tddatainput1').width(), $('#tddatainput1').height(), $('#tddatainput1').css('font-size'), 'Language internationalization adaptive testing');
            });
        });



        //根据毫米算DPI
        function cm2px(cm) {
            var dpi = getDPI();
            var pixel = parseFloat(cm) / 25.4 * dpi[0]; //只计算x轴的dPI
            return (parseInt(pixel))
        }

        function getDPI() {
            var arrDPI = new Array();
            if (window.screen.deviceXDPI != undefined) {//ie 9
                arrDPI[0] = window.screen.deviceXDPI;
                arrDPI[1] = window.screen.deviceYDPI;
            } else {//chrome firefox
                var tmpNode = document.createElement("DIV");
                tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
                document.body.appendChild(tmpNode);
                arrDPI[0] = parseInt(tmpNode.offsetWidth);
                arrDPI[1] = parseInt(tmpNode.offsetHeight);
                tmpNode.parentNode.removeChild(tmpNode);

            }
            return arrDPI;
        }

    </script>

}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
    @*<script src="~/Scripts/jquery-1.11.0.min.js"></script>*@
    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/jquery.marquee.js"></script>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("styles", required: false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                @Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

效果如下：第一行根据内容缩放；第二行根据内容自动滚动播放；

　　

 

来源：https://www.cnblogs.com/turnip/p/12551630.html