Question

我需要根据MySQL变量创建一个坦克中水位的动画，我每5秒从数据库中获取一次。

值为1到100，它表示％，因此目标是，根据％值，水可以平稳地向上或向下移动。

到目前为止，我有这个：

脚本每隔5000毫秒检查数据库中的值：

$(document).ready(function () {setInterval(function() {$.get("http://www.h2o-info.com/betapage/script_water_detail.php", function (result) {$('#water_detail').html(result);});}, 5000); });

并在div中显示结果：

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

script_water_detail.php：

<?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

?>

css属性：

 #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;
    }

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

Betalink

你怎么看，它没有正常工作，我先说的是，它应该在第一页上顺利加载＆＃34; fill＆＃34;从底部到顶部关于实际值，然后根据数据库的值更改或更改。

也许有人有任何建议。

Answer 1

Imho最简单的解决方案是使用白色div并将蓝色小孩div放入其中，其数据库百分比为margin-top

（加上父div必须将overflow设置为hidden，而不显示隐藏的水部分。

请查看此jsfiddle以查看其实际效果。

代码

HTML：

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

CSS：

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

使用Javascript：

$(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); 
});

(200-result*2)仅归因于div是最大值的“两倍高度”（100％= 200px）。可能更准确的方式是写div_width - (result/100 * div_width)

（在这种情况下，0％的结果会导致margin-top:200px，margin-top:100px会导致50％等等。

如何让它看起来更漂亮

将静态图片设置为子背景，而不只是单一颜色
更好的是：采取一种动画gif 来移动水的方式

工作示例

有关水位动画（具有随机水位）的示例，请参阅this jsfiddle。

解决方案，特定于OP

$(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); 
});

每2秒获得一次水位！将最后2000更改为您喜欢的内容，它只是间隔（应用脚本），以毫秒为单位。

Answer 2

尝试使用jQuery.animate()使水看起来充满水。使用灰色<div>下面（即：覆盖）的蓝色<div>。对于此示例，我们设置＆lt; div＆gt;高度为100像素。因此减少灰色＆lt; div＆gt;高度会发现更多的蓝色＆lt; div＆gt;。
接下来，解析PHP的输出并成功运行$("#grey_div").animate( {"height": 100 - parseInt(result_from_php)} );

Answer 3

你在script_water_detail.php中回应如此多。

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

动画不应该是困难的部分，它只是增加#water_detailed div的高度。

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

请原谅我没有提供任何代码，但如果您需要更多帮助，那么我可能会对其进行编码并给予您，但我认为不需要。

基于mySQL变量的基于jquery的圆柱体中水的动画

3 个答案:

代码

如何让它看起来更漂亮

工作示例

解决方案，特定于OP