javascript - 如何在 JS 中缩放 Sprite 图片

Question

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

代码最初为代码的一部分拉取图像并在调用缩略图时缩小。既然它正在调用 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>

我在某处读到我需要像背景大小这样的东西，但我对如何实现它一无所知。当前，当此代码运行时，缩略图加载为太大的常规大小。

提前致谢:)

Answer 1

几周前，我也研究了创建响应式 sprite，虽然那里有很多有用的信息，但没有一个最终能满足我的需求。以下是我认为的两个最好的示例，尽管它们并非没有缺点。

第二个链接讨论了背景大小，但它最终变得很棘手，具体取决于您的 Sprite 是否都具有相同的大小。

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

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