精灵

用JavaScript做精灵图

由 ◇◆丶佛笑我妖孽 提交于 2020-03-29 12:40:36
用JavaScript做精灵图 精灵图可以不用在给每一个小块一 一的修改位置。主要原理是找到整张的背景图与li的下标的数学关系. 这是一大张背景图，这个背景图的位置其实是有规律的，每两张之间间隔一个固定长度，这个固定长度刚好等于一个小图标的长度，我们使用的这个图间隔44px。 CSS样式如下图所示 样式代码如下： <style> *{ margin: 0; padding: 0; } body{ background-color: skyblue; } .conve{ width: 290px; border: 1px solid #aaa; margin: 100px auto; overflow: hidden; background-color: #fff; } .conve ul{ width: 292px; list-style: none; } .conve ul li{ height: 67px; float: left; width: 72px; border: 1px solid #aaa; margin: -1px 0 0 -1px; } .conve ul li a{ display: block; width: 72px; height: 67px; font-size: 12px; color: #555; text-decoration: none;

【神界原罪2】被困的精灵（The Imprisoned Elf）[支线]桔子洛斯对话第三项可以得到桔子

由 余生长醉 提交于 2020-01-31 03:31:48
扒窃发现登等级不够 强杀说是要打架，轮流队员一个个对话，洛斯对话第三项可以得到桔子 来源： CSDN 作者： 回到未来望过去 链接： https://blog.csdn.net/viviliving/article/details/104116447

js循环精灵图

由 人走茶凉 提交于 2019-12-06 07:38:52
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>用for循环填充精灵图</title> <style type="text/css"> #box{ width: 250px; margin: 100px auto; } #box li{ width: 24px; height: 24px; float: left; margin: 10px; background-color: pink; list-style-type: none; background: url(img/taobaojinglingtu.png) no-repeat; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>
订阅 精灵