JavaScript: sprite
JavaScript sprite
2023-09-11 14:16:16 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .box { width: 250px; margin: 100px auto; } .box li { float: left; width: 24px; height: 24px; background-color: palegoldenrod; margin: 18px; background: url(imgs/sprite.png) no-repeat; } </style> </head> <body> <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> <script> var lis = document.querySelectorAll("li"); for (let i = 0; i < lis.length; i++) { lis[i].style.backgroundPosition = `0 -${i * 44}px`; } </script> </body> </html>
相关文章
- 【前端安全】JavaScript防流量劫持
- Javascript中数组的sort()和reverse()方法
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] What is JavaScript Function Currying?
- [Javascript] The Array filter method
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Create Your First Iterator in JavaScript
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] An Introduction to JSPM (JavaScript Package Manager)
- Javascript 学习 笔记三
- 计算Javascript 指定语句执行时间的两种办法
- 聊聊JavaScript和Scala的表达式 Expression
- 使用 Promise 来改写 JavaScript 的加载逻辑
- javascript基础代码
- JavaScript 各种事件触发总结
- JavaScript数字(数值)