Re: [問題] 剪裁圖片
這是範例
參考看看
不過只有一個位置，要多個位置的話，要稍微修改一下
--
<script>
var xnum=12; //橫數量
var ynum=8; //直數量
var iw=32; //圖片尺寸
var ih=32; //圖片尺寸
var mindex=1;
function gxy(x,y){
x=x-1;y=y-1;
if(x<0){x=0;}if(x>(xnum-1)){x=xnum-1;}
if(y<0){y=0;}if(y>(ynum-1)){y=ynum-1;}
document.getElementById("temp").style.backgroundPosition='-'+(x*iw)+'px
-'+(y*ih)+'px';
}
function gi(i){
if(i>xnum*ynum){i=xnum*ynum;}
yt=Math.floor(i/xnum);
xt=i-yt*xnum;
gxy(xt,yt);
}
</script>
<style>
#temp{
background-image:url(Sprite-example.gif);
width:32px;
height:32px;
}
</style>
<div id="temp"></div>
<p><img src="Sprite-example.gif" width="384" height="256" /></p>
<input type="button" name="button" id="button" value="test"
onclick="gi(mindex++);"/>
<input type="button" name="button" id="button" value="3,3"
onclick="gxy(3,3);"/>
※ 引述《klern (灰)》之銘言：
: ※ [本文轉錄自 Ajax 看板 #1C_3jLps ]
: 作者: klern (灰) 看板: Ajax
: 標題: [問題] 剪裁圖片
: 時間: Mon Dec 6 09:24:34 2010
: 大家好
: 最近想做網頁先載入一張大圖
: 範例圖
: http://commons.wikimedia.org/wiki/File:Sprite-example.gif
: 在將圖片裁切成一張一張放入陣列中
: 等需要時候在進行呼叫
: 請問要如何用javascript去達成此目的
: 謝謝！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.62.37.152
推
12/07 09:04, , 1F
12/07 09:04, 1F
討論串 (同標題文章)