Monday, June 14, 2021

【JAVASCRIPT】 CSS Sprites one background image with multiple images vertically

<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
view raw index.html hosted with ❤ by GitHub
// 1. Get all the small li of the element
var lis = document.querySelectorAll('li');
for (var i = 0; i <lis.length; i++) {
// Let the index number multiplied by 44 is the background y coordinate of each li
var y = i * 44;
lis[i].style.backgroundPosition = '0 -'+ y +'px';
}
view raw script.js hosted with ❤ by GitHub
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.box{
width: 250px;
margin: 100px auto;
}
.box li{
margin: 15px;
float: left;
width: 24px;
height: 24px;
background: url(data:image/png;base64,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)no-repeat;
}
view raw style.css hosted with ❤ by GitHub

No comments:

Post a Comment