在中心的div中填充图片 [英] Fill image in a div from center

问题描述

整个网页载入时;黄色圆圈需要从中心的1条细线开始，并且将形成/填充整个圆圈。

我使用了jPreloader。我不知道如何从中心开始加载标志。目前，网页载入时的高度为动画。

Javascript的高度正在分配给div。

  $（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; 
} 
  

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

专案连结：

  http://50.87.144.37/~projtest/team/design/yellowmedia/ 
       jsfiddle.net/ZbkvL/1/rel =nofollow> jsFiddle 。认为这将帮助你，并添加功能，你加载屏幕。   
  
   
 $ b 
 < div id =outer> 
< div id =jpreBar>< / div> 
< / div> 
 
< input id =inputvalue =0/> 
< button id =button>更新< / button> 
  
  JS  
  $（document）.ready（function（）{
 $（'＃button'）。 #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; 
} 
  
 
While the entire page is loading; the yellow circle needs to start with 1 thin line from center and will ‘form/fill’ the entire circle.

I have used the jPreloader. I am not sure how to start loading the logo from center. Currently, the height is being animated as the page loads.

Javascript where the height is being assigned to the div.
$(jBar).stop().animate({
        height: per + '%'
    }, 500, 'linear');
CSS where the logo is placed:
#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; 
}
The animation needs to be like this, left to right:



Project link:
http://50.87.144.37/~projtest/team/design/yellowmedia/

解决方案
Try this code from my jsFiddle. Think this will help you and adds the functionality to you loading screen. The animation time and borders were added by me to test everything.

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


                        
这篇关于在中心的div中填充图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！