php - 基于 mySQL 变量的带有 jquery 的圆柱体中的水动画

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

你怎么看，它不能正常工作，我首先说的，它应该在第一页上顺利加载，从底部到顶部关于实际值“填充”，然后根据值向上或向下变化数据库。

也许有人有什么建议。

Answer 1

恕我直言，最简单的解决方案是拥有一个白色的 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，50% 导致 margin-top:100px，等等)

如何让它看起来更好

• 设置一张静态图片作为 child 的背景，而不仅仅是一种颜色

• 更好的是:制作一个像水一样移动的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 更改为您喜欢的值，它只是以毫秒为单位的间隔(应用脚本)。