Php 基于mySQL变量的jquery缸内水动画

我需要创建一个基于MySQL变量的水箱水位动画，每5秒从数据库中获取一次

这个值是从1到100，它意味着%，所以目标是，根据%的值，水可以平稳地向上或向下移动

到目前为止，我有：

每5000ms检查一次数据库中的值的脚本：

并在div中显示结果：

到目前为止，我得到了以下结果：

您可以看到，它不能正常工作，我首先说过，它应该在第一页上平滑地从下到上“填充”实际值，然后根据数据库的值向上或向下更改

---

也许有人有什么建议。

您在script\u water\u detail.php中的反响太大了

您应该只回显这个脚本中的水百分比，使用它可以在jQuery函数中设置水位动画

动画不应该是困难的部分，它只是增加了#water#u细节div的高度

因此，基本上，我认为一旦结构得到纠正，问题就会消失

---

请原谅我没有提供任何代码，但是如果您需要更多的帮助，那么我可能会编写代码并提供给您，但我认为它不会被需要。

我认为最简单的解决方案是使用一个白色的

div

并在其中放入一个蓝色的子

div

，其中包含数据库百分比中的

边距顶部
值

（加上父级
div
必须将其
溢出
设置为
隐藏
，而不显示隐藏的水部分）

看看这个，看看它在起作用

代码
HTML:

Javascript:

（200结果*2）
只是因为div是最大值（100%=200px）的“两倍高度”。可能更“准确”的方法是写：
div\u width-（result/100*div\u width）

（在这种情况下，0%的水平会导致
边际顶部：200px
，50%的水平会导致
边际顶部：100px
，等等。）

如何让它看起来更好

将静态图像设置为儿童背景，而不仅仅是单一颜色

更好的方法是：使用一个动画gif，它可以像水一样移动


工作示例
有关水位动画（具有随机水位）的示例，请参见

解决方案，特定于OP
这是每2秒测一次水位！将最后一个
2000
更改为您喜欢的值，它只是以毫秒为单位的间隔（应用脚本）

试着用它让人觉得水已经满了。
使用灰色
下面（即：覆盖）的蓝色
。对于本例，让我们将两个高度都设置为100 px。因此，降低灰色的高度会暴露出更多的蓝色

接下来，解析PHP的输出，成功后运行
$（“#grey_div”）.animate（{“height”：100-parseInt（result_from_PHP）}）

与我的答案几乎相同，但是使用子div的高度而不是
overflow:hidden的边距是个好主意就像我建议的！使它变得更简单，但请注意，在这种情况下，不能简单地用水图像（或gif动画）替换div。很好地使用
动画
！我试着使用。动画，但动画不断重复，我不知道为什么。此外，“水”始终从上到下设置动画，但目标是在第一次访问页面时显示实际的%值，然后，如果您停留在页面上，该值每5000毫秒刷新一次，图形应缓慢向上或向下移动，根据值的不同。@user3909146:我在回答的底部添加了一个带有
animate
的工作示例，请看一看！是的，我知道，因为到目前为止我尝试了很多东西，这让我发疯。首先我有div#water_的详细信息，我只需要通过javascript每5000毫秒更新一次值，然后得到当前值。然后在我的内部有另一个div#water_详细说明，它应该通过动画可视化值，在第一页加载当前的%值，如果您停留在页面上，则根据该值平滑地上下更改图形。mysql已弃用，请使用mysqli或PDO。是的，这正是它的外观，我将尝试在我的项目中实现它，希望它能工作。如前所述，你甚至可以拍摄一幅水的图像（或动画）并将其设置为孩子的背景，而不仅仅是使用蓝色<代码>背景：url（'water.gif'）不重复左上角例如。这里有一个图像示例：它另外实现了一个偏移，以始终显示图像的至少一小部分，这也是为了演示这一点。如果可能的话（关于资源），您还可以尝试将数据库查询的间隔设置为700ms，这对于真实世界的数据来说很有可能看起来非常流畅/漂亮（虽然不适用于跳跃的随机值）。好的，动画效果很好：使用随机值，但是：-动画非常快，更改duration的值不会生效-我看到脚本中的$row of script\u water\u detail.php的值被排除在外/$.get（“），函数（result）中，如何从中获取这些值{，但我不明白：/I只是将其排除在外，因为我无法从中获取值！您必须注释掉这一行
var result=Math.rand…
，并从
$.get（“h2o-…
（当然还有右括号）中删除注释，它应该已经可以工作了。或者更好，如果你只是移动整个
$（“#水位”）。动画（…
行到你设置html值的另一个ajax调用中！（只需将它放在
$（“#sensor1_val'）.html（结果）；
之后即可）。顺便说一句，如果这个答案解决了你的问题，你可以升级/接受它
$(document).ready(function () {setInterval(function() {$.get("http://www.h2o-info.com/betapage/script_water_detail.php", function (result) {$('#water_detail').html(result);});}, 5000); });

<div id="water_detail"></div>

<?php

// Connect to MySQL
$link = mysql_connect( 'xxx', 'xxx', 'xxx' );
if ( !$link ) {
  die( 'Could not connect: ' . mysql_error() );
}

// Select the data base
$db = mysql_select_db( 'xxx', $link );
if ( !$db ) {
  die ( 'Error selecting database \'xxx\' : ' . mysql_error() );
}
    $query = mysql_query("select V_00 from SensorLog where S_ID = 1 ORDER BY ID DESC LIMIT 1;");
    while ($row = mysql_fetch_array($query)) 
    {    

?>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#water_detailed").css({
height:'<?php echo round ($row['V_00'], 0); ?>px'})
});
</script>


<?php
if($row['V_00']<='0'){
print "<div class='water_fill_1'>";
echo round ($row['V_00'], 0);
"</div>";
}

elseif ($row['V_00']<='2'){
print "<div class='water_fill_5'>";
echo round ($row['V_00'], 0);
"</div>";

}else{
print "<div id='water_detailed'></div>";
}


} // End while loop

?>

 #water_detailed {
    background: #e2f4ff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZjRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2ExZGJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGIwZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #e2f4ff 0%, #a1dbff 47%, #00b0fc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2f4ff), color-stop(47%,#a1dbff), color-stop(100%,#00b0fc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e2f4ff 0%,#a1dbff 47%,#00b0fc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f4ff', endColorstr='#00b0fc',GradientType=0 ); /* IE6-8 */
    width: 280px;
    height:0;
    float:right;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;
    font-size: 20px;
    }

    #water_detail {
    width: 280px;
    margin: -275px 100px 0 0;
    float: right;
    }

<div id="water_detail">
    <div id="water_level"></div>
<div>

#water_detail { height:200px; background:white; overflow:hidden; width:250px; }
#water_level  { height:200px; background:blue; margin-top:200px;/*initially*/ }

$(document).ready(function () {
    setInterval(function() {
        $.get("http://www.h2o-info.com/betapage/script_water_detail.php", function (result) {
            //$('#water_detail').html(result);
            $('#water_level').animate({'margin-top' : (200-result*2)+'px'});
        });
    },5000); 
});

$(document).ready(function () {
    setInterval(function() {
        $.get("http://www.h2o-info.com/betapage/script_water_detail.php", function (result) {
            $('#water_level').animate( {'margin-top' : (200-result*2)+'px' } );
        });
    },2000); 
});