我将如何在我的代码中使用图像精灵?
Posted
技术标签:
【中文标题】我将如何在我的代码中使用图像精灵?【英文标题】:How would I use image sprites with my code? 【发布时间】:2018-03-26 16:36:11 【问题描述】:这是我的代码,如何让图像精灵使用它?我该如何设置?
我刚读到这个,这应该可以解决我遇到的问题,但我不知道如何设置。
所有帮助将不胜感激。
代码
https://jsfiddle.net/7amfsp10/
这里有 2 张图片,您可以尝试一下。
https://i.imgur.com/T9n7wTd.png
https://i.imgur.com/jkxd2F5.png
【问题讨论】:
也许,您需要通过伪元素使用您的精灵。另外,问题还不够清楚,至少对我来说是这样。 你能告诉我如何请因为我一直在努力解决这个问题。 就是点击后看到的闪烁。 它应该可以解决我在这里遇到的这个问题:***.com/questions/46723113/… 我被告知要使用图像精灵。 js和html乱七八糟的。这是一个不好的做法。我会试着整理一下这个烂摊子,然后会尽力帮助你。您想使用预加载的图像,然后用您的图像进行更改? 【参考方案1】:https://jsfiddle.net/7amfsp10/3/
我在乞讨时添加的
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" >
</div>
这会预加载您将来使用的图像。由于浏览器很智能,它不会两次加载相同的图像。所以我们只是在页面中加载图片,然后我们将它隐藏起来,让它不可见,但它已经兑现了。
如果您想更改图像,只需更改 <img>
和 js 代码中的链接即可。
#更新
为图像添加属性aria-hidden="true"
,使其对屏幕阅读器不可见。
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" >
</div>
<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused)
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
else
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
">
<svg class="play" style="display: none;" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="pause" style="display: none;" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="initial" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</button>
<audio id="player2" style="display:none;">
<source src=';' type='audio/mpeg'></source>
</audio>
【讨论】:
如果我想使用 2 张图片而不是 1 张? i.imgur.com/jkxd2F5.png / i.imgur.com/T9n7wTd.png 我要把代码改成什么? 在代码中有两个占位符。您可以使用 Ctrl+F 找到它们。所以你用你的图像改变了其中的两个。然后你需要在顶部添加另一个图像。只需复制现有的副本并更改其源链接。 喜欢这个? i.imgur.com/jkxd2F5.png" > i.imgur.com/T9n7wTd.png" > 固定:jsfiddle.net/o9f94mju 差不多。您忘记了更改脚本中的两个图像。通过http://via.placeholder.com/260x260
找到它们并使用所需的图像进行更改。注意,因为有``不要碰它们,因为它们“保护”单引号不被分成不同的字符串。
完美完成!您可以通过尝试与之交互来轻松检查它是否良好。但是,如果您使用具有完全访问权限的站点,我不建议将 css、js 和 html 结合使用。但是,就目前的情况而言,这很好。不要忘记添加音频的链接。以上是关于我将如何在我的代码中使用图像精灵?的主要内容,如果未能解决你的问题,请参考以下文章