欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

在徑向標尺中添加動畫元素(HTML/CSS/JS)

CSS
錢良釵2年前8瀏覽0評論

我已經創建了一個頁面，該頁面使用帶有指針的徑向標尺獲取值并描繪相同的值。在我的徑向標尺內，我有標記和高光，即從0 - 60的高光顏色是綠色，對于標記60-100，筆畫將超過紅色的高光。這兩種顏色的不透明度都為0.2(原始顏色的20%)。現在，我需要添加動畫，這樣，當我的指針移動時，我需要我的高光顏色以動畫的方式變成更暗的陰影(不透明度= 1，意味著完全精確的顏色)。

我使用gauge.min.js作為我的徑向標尺。 下面是代碼。請建議我能做些什么。

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script src="gauge.min.js"></script>
    
    <title>Gauge Test</title>
     <style>

        .gauge-container {
        display: inline-block;
            margin: 2px;
        margin-top: 40px;
        margin-left: 9px;
            text-align: center;
       // width: 25%; /* Adjust the width based on your preference */
    
        }

        .gauge-title {
            margin-top: 5px;
        margin-bottom: 5px;
        font-size: 18px;
        }

.gauge-container:first-child {
            margin-left: 5px;
        }

    </style>

    <script>
        function GetTagValues() {
            // Send the request
            jQuery.ajax({
                url: "link1.shtm", dataType: "json", success: TagValuesReceived, 
        error: TagValuesError, timeout: 10000
            });

            // Update value in webpage
        }

        function TagValuesReceived(json) {
            data1.value = json.X_DATA;

            setTimeout("GetTagValues()", 1000);
        }

        function TagValuesError() {

        }

        GetTagValues();
    </script>
</head>
<body>

  <div class="gauge-container">
        <a type="button" href="http://10.121.62.74/usr/LUB_PR.shtm" target="data1"><canvas id="gauge1"></canvas></a>
    <h2 class="gauge-title">X_Current</h2>
        <div id="gauge1"></div>
    </div>

  </div>

   <script>
        var data1 = new RadialGauge({
            renderTo: 'gauge1',
            width: 190,
            height: 190,
            units: 'A',
            title: false,
            value: 0,
            minValue: 0,
            maxValue: 100,
            majorTicks: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
            minorTicks: 2,
            strokeTicks: true,
            highlights: [
                { "from": 0, "to": 60, "color": "rgba(0,255,0,.15)" },
                { "from": 60, "to": 100, "color": "rgba(255,30,0,.25)" }
             ],
            animationDuration: 1500,
            animationRule: "linear",
        }).draw();
    </script>
</body>
</html>

我嘗試使用不同的方法，但我只能實現一個像酒吧一樣的結構外，我的徑向規沿其邊緣得到填充。但是我想在我的量規里放一個同樣的條形的東西，開始也要加亮，上面也要有標記。(在這種意義上，是一個徑向(彎曲的)結構，位于我的儀表的曲線之外)