问题描述
嗨,我正在尝试在我的栏上出现的每个文本之后包含一个图像,这是我无法弄清楚的 js 的问题,感谢您的帮助,(“//不同的尝试”)是图像应该放在的位置!
这是一个抽搐填充栏,它有效,但我想在每个文本后包含心脏。
document.addEventListener('goalLoad',function (obj) {
/*what i tried here
var img = new Image(); // Create new img element
img.src = 'https://icon-library.com/images/twich-icon/twich-icon-2.jpg'; // Set source path
what i tried here */
$('#title').html(obj.detail.titel);
$('#goal-total').text(obj.detail.amount.target);
$('#goal-end-date').text(obj.detail.to_go.ends_at);
$('#goal-current').text(obj.detail.amount.current);
var total = $('#goal-total').html(),current = $('#goal-current').html();
$('#total-bar').css('width',current / total * 100 + '%').css('width','-=8px');
$('#goal-total').text(obj.detail.amount.target) + $('#goal-total').img.src; // different tries
$('#title').text(obj.detail.titel1) + img.src; // different tries
$('#goal-current').text(obj.detail.amount.current) + img.src; // different tries
});
document.addEventListener('goalEvent',function (obj) {
$('#goal-total').text(obj.detail.amount.target);
$('#goal-current').text(obj.detail.amount.current);
var total = $('#goal-total').html(),'-=8px');
$('#goal-total').text(obj.detail.amount.target + ''); // different tries
$('#title').text(obj.detail.titel1) + img.src; // different tries
$('#goal-current').text(obj.detail.amount.current + '');
}); // different tries
/* All html objects will be wrapped in the #wrap div */
.goal-cont { margin: 10px; color: white; }
#title { font-size: 28px; text-transform: uppercase; font-weight: bold; font-family: Roboto,sans-serif; text-align: center; text-shadow: 0px 0px 10px #000; margin: 0; width: 70%; z-index: 1; }
#goal-current,#goal-total { margin: 1; font-family: Roboto,sans-serif; font-weight: bold; font-size: 25px; text-shadow: 0px 0px 10px #000; width: 15%; z-index: 1; }
#goal-total { text-align: right; }
#goal-bar { border: 1px solid transparent; background:linear-gradient(90deg,rgba(0,5,255,1) 0%,rgba(255,10,1) 100%),linear-gradient(to bottom right,#b827fc 0%,#2c90fc 25%,#b8fd33 50%,#fec837 75%,#fd1892 100%) center center / 120% 120% ; background-clip:content-Box,border-Box; padding: 7px; display: flex; overflow: hidden; border-radius: 100px; }
#total-bar { position: absolute; width: calc(100% - 8px); height: calc(100% - 8px); max-width: 100%; background: url('https://i.ytimg.com/vi/vdB-8eLEW8g/hqdefault.jpg'); background-size: contain; top: 4px; left: 4px; overflow: hidden; border-radius: 100px; }
#line{ position: absolute; top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation-name: animate; animation-duration: 4s; animation-iteration-count: infinite; border-radius: 100px; }
@keyframes animate { 0% {background-color:red; opacity: 0.2;} 25% {background-color:yellow; opacity: 0.2;} 50% {background-color:blue; opacity: 0.2;} 75% {background-color:green; opacity: 0.2;} 100% {background-color:red; opacity: 0.2;} }
#img,#img1,#img2{ width:20px; height:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='goal-cont'>
<div style='position: relative'>
<div id='goal-bar'>
<p id='goal-current'>0</p>
<p id='title'>More</p>
<p id='goal-total'>20</p>
<div id='total-bar'><p id ='img'></p>
<div id='line'>
</div>
</div>
</div>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)