如何在保持纵横比的同时将页面加载器调整为浏览器窗口的大小

How to resize page loader to browser window while keeping the aspect ratio?

本文关键字：加载 调整 窗口 浏览器      更新时间：2023-09-26

需要一些帮助使此页面加载器响应。希望加载程序在窗口浏览器加载和/或调整大小时放大和缩小大小。宽度、高度、字体大小和直径需要转换为百分比而不是像素。我需要加载程序针对所有设备类型进行扩展。请帮忙，我知道你们可以在几分钟内弄清楚。

非常感谢您的帮助！

我的例子：http://www.jasalounge.com/test/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Loader Examplee</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
(function(d) {
    d.fn.ClassyLoader = function(a) {
        a = d.extend({}, {
            animate: !0,
            displayOnLoad: !0,
            percentage: 100,
            speed: 1,
            roundedLine: !1,
            showRemaining: !0,
            fontFamily: "Helvetica",
            fontSize: "50px",
            showText: !0,
            diameter: 80,
            fontColor: "rgba(25, 25, 25, 0.6)",
            lineColor: "rgba(55, 55, 55, 1)",
            remainingLineColor: "rgba(55, 55, 55, 0.4)",
            lineWidth: 5
        }, a);
        var e = d(this);
        this.draw = function(b) {
            "undefined" !== typeof b && (a.percentage = b);
            var c = e[0].getContext("2d"),
                g = e.width() / 2,
                d = e.height() / 2,
                f = 0;
            c.scale(1, 1);
            c.lineWidth = a.lineWidth;
            c.strokeStyle = a.lineColour;
            setTimeout(function h() {
                var b = Math.PI / 180 * 360 / 100 * (f + 1),
                    b = b || Math.PI / 180 * 360 / 100 * (f +
                        1);
                c.clearRect(0, 0, e.width(), e.height());
                !0 === a.showRemaining && (c.beginPath(), c
                    .strokeStyle = a.remainingLineColor,
                    c.arc(g, d, a.diameter, 0, 360), c.stroke(),
                    c.closePath());
                c.strokeStyle = a.lineColor;
                c.beginPath();
                c.lineCap = !0 === a.roundedLine ? "round" :
                    "butt";
                c.arc(g, d, a.diameter, 0, b);
                c.stroke();
                c.closePath();
                !0 === a.showText && (c.fillStyle = a.fontColor,
                    c.font = a.fontSize + " " + a.fontFamily,
                    c.textAlign = "center", c.textBaseline =
                    "middle", c.fillText(f + 1 + "%", g,
                        d));
                f += 1;
                f < a.percentage && setTimeout(h, a.speed)
            }, a.speed)
        };
        this.setPercent = function(b) {
            a.percentage = b;
            return this
        };
        this.getPercent = function() {
            return a.percentage
        };
        this.show = function() {
            var b = e[0].getContext("2d"),
                c = e.width() / 2,
                d = e.height() / 2;
            b.scale(1, 1);
            b.lineWidth = a.lineWidth;
            b.strokeStyle = a.lineColour;
            b.clearRect(0, 0, e.width(), e.height());
            b.strokeStyle = a.lineColor;
            b.beginPath();
            b.arc(c, d, a.diameter, 0, Math.PI / 180 * (a.percentage /
                100) * 360);
            b.stroke();
            b.closePath();
            !0 === a.showText && (b.fillStyle = a.fontColor, b.font =
                a.fontSize + " " + a.font, b.textAlign =
                "center", b.textBaseline = "middle", b.fillText(
                    a.percentage + "%", c, d));
            !0 === a.showRemaining && (b.beginPath(), b.strokeStyle =
                a.remainingLineColor, b.arc(c, d, a.diameter, 0,
                    360), b.stroke(), b.closePath())
        };
        this.__constructor = function() {
            d(this).attr("width", a.width);
            d(this).attr("height", a.height);
            !0 === a.displayOnLoad && (!0 === a.animate ? this.draw() :
                this.show());
            return this
        };
        return this.__constructor()
    }
})(jQuery);
</script>

<script>

$(document).ready(function() {
$('.loader').ClassyLoader({
width:900,
height:900,
animate: true, // whether to animate the loader or not
displayOnLoad: true,
percentage: 100, // percent of the value, between 0 and 100
speed: 1, // miliseconds between animation cycles, lower value is faster
roundedLine: false, // whether the line is rounded, in pixels
showRemaining: true, // how the remaining percentage (100% - percentage)
fontFamily: 'Helvetica', // name of the font for the percentage
fontSize: '100px', // size of the percentage font, in pixels
showText: true, // whether to display the percentage text
diameter:200, // diameter of the circle, in pixels
fontColor: '#53E40D', // color of the font in the center of the loader, any CSS color would work, hex, rgb, rgba, hsl, hsla
lineColor: '#53E40D', // line color of the main circle
remainingLineColor: 'lightgray', // line color of the remaining percentage (if showRemaining is true)
lineWidth: 10 // the width of the circle line in pixels

});
});
</script>

<style type="text/css">
body {
    background-color:black;
}
div#loaderWrapper {
    text-align:center;
        margin:auto;
width:100%;
    height:100%;
}
.loader {
    background-color:red !important;
    text-align:center !important;
}
</style>
</head>
<body>
<div id="loaderWrapper" ><canvas class="loader"></canvas></div>
</body>
</body>
</html>

尝试调整函数大小所有脚本也都放入

$（window）.resize（function（）{

}）这是呼唤

相关文章：