javascript - 将图像从中心填充div

当整个页面正在加载时；黄色圆圈需要从中心开始的1条细线开始，并将“形成/填充”整个圆圈。

我已经使用了jPreloader。我不确定如何从中心开始加载徽标。当前，页面加载时正在对高度进行动画处理。

将高度分配给div的Javascript。

$(jBar).stop().animate({
        height: per + '%'
    }, 500, 'linear');

放置徽标的CSS：

#jpreBar {
     border-radius:0%;
     -moz-border-radius:0%;
     -webkit-border-radius:0%;

     background: url(../images/logo.jpg) left top no-repeat;

     animation: progress 2s linear infinite;
     -moz-animation: progress 2s linear infinite;
     -webkit-animation: progress 2s linear infinite;
     -ms-animation: progress 2s linear infinite;
     -o-animation: progress 2s linear infinite;
}

动画需要像这样，从左到右：

最佳答案

从我的jsFiddle中尝试此代码。认为这将对您有所帮助，并将功能添加到您的加载屏幕。我添加了动画时间和边框来测试所有内容。

HTML：

<div id="outer">
    <div id="jpreBar"></div>
</div>

<input id="input" value="0" />
<button id="button">Update</button>

JS

$(document).ready(function(){
   $('#button').click(function(){
      var per = $('#input').val();

      var height = per;
      backgroundy = -176 + 176 * (per/100);
      margintop = 176 - 176 * (per/100);

      $('#jpreBar').stop().animate({
         'height': height + '%',
         'background-position-y': backgroundy + 'px',
         'margin-top': margintop + 'px'
      }, 5000, 'linear');
   });
});

的CSS

#jpreBar {
 border-radius:0%;
 -moz-border-radius:0%;
 -webkit-border-radius:0%;

 background-image: url("http://50.87.144.37/~projtest/team/design/yellowmedia/images/logo.jpg");
 background-repeat: no-repeat;
 background-position: 0px -176px;
 height: 0%;
 margin-top: 176px;

 animation: progress 2s linear infinite;
 -moz-animation: progress 2s linear infinite;
 -webkit-animation: progress 2s linear infinite;
 -ms-animation: progress 2s linear infinite;
 -o-animation: progress 2s linear infinite;

 border: 0px solid black;
}

#outer{
 border: 0px solid black;
 height: 351px;
}

关于javascript - 将图像从中心填充div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18567994/