Question

我曾尝试寻找解决方案，但我不确定这个术语到底会被称为什么。我正在寻找jquery ajax调用MySQL数据库来确定一个数字（0-100％）并将该数字用作百分比。使用该百分比生成实时（每1分钟检查一次）指示百分比是多少。

想象一下空杯水的图像，每60秒执行一次对MySQL的调用，并从MySQL中检索百分比数。该数字将使背景图像从底部开始显示。当这个数字从MySQL变得更大时，每60秒显示更多的图像，直到玻璃100％满。

我可以处理所有需要完成的MySQL查询和php，我只是不知道这个风格动画或插件是否有一个术语，或者我正在寻找什么才能使图像'卷起'每60个秒基于MySQL的返回值

我正在使用的成功：

<html>
<title></title>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        setInterval(function() {
            var a = $('#inner').height();

            $('#inner').animate({ height: a + 25 });
        }, 3000);
    </script>
</head>
<body>
    <div id="outter">
        <div id="inner" style="background-color:blue; height:0px"></div>
    </div>
</body>
</html>

JS Fiddle

Answer 1

您可以使用clip属性：

var target = document.getElementById('target'),
    h = target.clientHeight,
    w = target.clientWidth;
setInterval(function(){
    var v = h*(1-getPercentage()/100) | 0;
    target.style.clip = 'rect('+v+'px,'+w+'px,'+h+'px,0)';
}, 100);

Demo

Answer 2

最简单的方法 - 创建一个具有代表实际空玻璃的透明区域的图像。将它（或任何元素用作背景）放置在具有蓝色背景的DIV之上。并根据您从AJAX调用返回的数字简单控制背景DIV高度。

Answer 3

我会使用jquery animate函数来增加彩色部分的高度，并使用setInterval函数每60秒调用一次（尽管应该注意这对于精确计时并不准确）。

类似的东西：

setInterval(function() {
    $.post("url", function(data) { 
        $("#image").animate({"height": data + "px"});
    }
}, 60000);

#image的高度增加位于静态“玻璃”图像后面。

E.G：

HTML:
<div id="image-container">
    <div id="image"></div>
    <img src="glass.png" />
</div>

显示基于数据库的图像百分比

3 个答案: