如何在JS中缩放Sprite图片

Question

我正在使用最初为单个PNG图像编写的JS代码，但我正在转换为使用Sprite Image。

该代码最初为一部分代码提取了图像，并在调用缩略图时收缩。 调用Sprite类后，产生相同影响的最佳方法是什么？

 //<![CDATA[ var awards2 = { start : function(){ if(location.href.match(/\\/topic\\/\\d+\\/?/)){ for(var a=0;a<t_award2.users.length;a++){ awards2.present(a); } } }, present : function(a){ var award2 = t_award2.users[a]; if($("."+award2[0]+"-awards2").size() == 0){ $("a.member[href="+main_url+"profile/"+award2[0]+"/]").parent().parent().next().find("dl.user_info dd.spacer").before('<dt>'+t_award2.name+':</dt><dd class="'+award2[0]+'-awards2"><div onmouseover="awards2.tooltip.open(event,'+a+');" onmouseout="awards2.tooltip.bye('+a+');" id="'+a+'-award2" class="'+award2[2]+'" alt="'+award2[1]+'" width="'+t_award2.thumbnail[0]+'px" height="'+t_award2.thumbnail[1]+'px" /></dd>'); } else { $("."+award2[0]+"-awards2").append('<div onmouseover="awards2.tooltip.open(event,'+a+');" onmouseout="awards2.tooltip.bye('+a+');" id="'+a+'-award2" class="'+award2[2]+'" alt="'+award2[1]+'" width="'+t_award2.thumbnail[0]+'px" height="'+t_award2.thumbnail[1]+'px" />'); } }, tooltip : { current : 0, open : function(event,a){ var award2 = t_award2.users[a]; var pos = awards2.mouse.locate(event); awards2.tooltip.coords = [pos[0],pos[1]]; if($("#"+a+"-tooltip").size() == 0)$("body").append('<div id="'+a+'-tooltip" style="position:absolute;max-width:500px;"><table><thead><tr><th colspan="2">'+award2[1]+'</th></tr></thead><tbody><tr><td><div class="'+award2[2]+'" alt="'+award2[1]+'" /></td><td>'+award2[3]+'<hr /><strong>Received:</strong> '+award2[4]+'</td></tr></tbody></table></div>'); var elem = document.getElementById(a+"-tooltip"); elem.style.left = pos[0]+10+"px"; elem.style.top = pos[1]+10+"px"; awards2.tooltip.current = a; document.onmousemove = awards2.tooltip.update; }, update : function(event){ var pos = awards2.mouse.locate(event); var elem = document.getElementById(awards2.tooltip.current+"-tooltip"); if(elem !== null){ elem.style.left = pos[0]+10+"px"; elem.style.top = pos[1]+10+"px"; } else { document.onmousemove = null; } }, bye : function(a){ switch(t_award2.closeFunction){ case "slide":$("#"+a+"-tooltip").slideToggle("fast",function(){$(this).remove();});break; case "fade": $("#"+a+"-tooltip").fadeOut("fast",function(){$(this).remove();});break; default: $("#"+a+"-tooltip").remove();break; } } }, mouse : { locate : function(event){ e = event || window.event; coords = [0,0] if (e.pageX || e.pageY) { coords = [e.pageX,e.pageY]; } else { var de = document.documentElement; var b = document.body; coords = [e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0),e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0)]; } return coords; } } } awards2.start(); //]]> 

 .exampleclass { display: inline-block; background: url('sprite.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; } .exampleclass { background-position: -2px -3491px; width: 50px; height: 50px; } 

 <script type="text/javascript"> //<![CDATA[ var t_award2 = { name : “Award”, thumbnail : [20,20], closeFunction : "fade", users : [ [user ID,”Name”,”exampleclass”,”Message”,”Date”], [user ID,”Name”,”exampleclass”,”Message”,”Date”] ] } //]]> </script> 

我读过某个地方，我需要像background-size这样的东西，但我对如何实现这一点一无所知。 当前，当运行此代码时，缩略图将按常规尺寸加载，该尺寸太大。

提前致谢 ：）

Answer 1

几周前，我也考虑创建响应式精灵，尽管那里有很多很好的信息，但没有一个最终能满足我的需求。 在我看来，这是两个最好的例子，尽管两者并非没有缺点。

第二个链接是关于背景大小的，但最终取决于您的精灵大小是否相同而变得棘手。

http://tobyj.net/responsive-sprites/

http://blog.brianjohnsondesign.com/responsive-background-image-sprites-css-tutorial/