iT邦幫忙

0

javascript image擷取

url = "../images/cap.png";
$("#channelList>ul").append(
    $('<img>').attr("src", url),
    .
    .
    .
)

如果我用上面的方式插入下面那張圖
https://ithelp.ithome.com.tw/upload/images/20190527/20113245QBd8bwUwAP.png
那我可以用甚麼方式擷取其中一個圖樣??
例如截取 ->> https://ithelp.ithome.com.tw/upload/images/20190527/201132459Qn7SIq5w4.png

1
dragonH
iT邦新手 2 級 ‧ 2019-05-27 11:41:36

codepen

如果你只是要擷取這張圖的某部分

然後在網頁顯示的話

可以用css切

不過我印象中這種方式

好像是很久以前為了減少http request的次數才這樣做的

然後你只是要這種簡單的圖標的話

可以參考這邊

就不用自己切了

我確實要用CSS去做切割,但因為圖片是利用for迴圈加上去的,一次會出現很多(下圖)
https://ithelp.ithome.com.tw/upload/images/20190527/20113245IedO64Cqks.png
所以才不知道該怎麼去做調整。

dragonH iT邦新手 2 級 ‧ 2019-05-27 12:03:02 檢舉

sinceremei我改成js了 你在看一下

0
WQ
iT邦新手 4 級 ‧ 2019-05-27 11:45:49
<div class="div_bg1"></div>
<style type="text/css">
   .div_bg1
        {
            width: 22px;
            height: 22;
            background-image: url(./bk.png);
            background-repeat: no-repeat;
            background-position: -22px -22px;
        }
</style>

?

WQ iT邦新手 4 級 ‧ 2019-05-27 12:45:14 檢舉

忘了SHOW程式碼!

0
浩瀚星空
iT邦大師 1 級 ‧ 2019-05-27 12:09:40

這樣的做法的確很少見。
一般都是直接在css規劃好之後。你在加入元件時就給於對應的class就好了。
倒是很少從程式指定圖片。畢竟這種多切圖的部份。大多是固定的格式。
從css設定好來取用就好了。

最後我選擇大大的做法,現在css裡面規畫在用class去找,但我排版一直排不好,大大能給我一些建議嗎?
javascript

$("#channelList>ul").append(
    $('<li>').text(resultList)
             .css({ "color":"white"}),
        $('<img class="chn">')
)

css

.chn {
    background: url("../images/c.png") no-repeat 0 0;
}

這是結果
https://ithelp.ithome.com.tw/upload/images/20190528/20113245hvx0PgUImM.png
我想將圖片一到文字後面

感覺你的用法還是錯誤的。你圖片是用background的方式處理的。就不該再用img元件了。使用div就可以了。
再搭配 display: inline-block; 這段css就可以達到你的理想。

0
rogeryao
iT邦研究生 2 級 ‧ 2019-05-27 13:57:39

Html

<div id="SMALL">
<ul>
    click icon
    <br>
    <br>
    <dt><!--***--></dt>
    <dt><!--***--></dt>
    <dt><!--***--></dt>
    <dt><!--***--></dt>
</ul>
</div>       

Javascript + jQuery

dt = $('ul dt');
dt.each(function (i) {
    var imgA = $("<img />");
    imgA.attr({
        "id": i+"x",
            "src":                "http://www.iconeasy.com/icon/thumbnails/Media/Play%20Stop%20Pause/Play%20Normal%20Icon.jpg",
            "alt": "image" + i+"x",
    });
    $(this).append(imgA)
    //
    var imgB = $("<img />");
    imgB.attr({
        "id": i+"y",
            "src": "http://www.iconeasy.com/icon/thumbnails/System/Must%20Have/DVD%20Disk%20Icon.jpg",
            "alt": "image" + i+"y",
    });
    $(this).append(imgB)   
    
});
//
$(function(){
  $("#SMALL img").click(
  function(){
    alert( 
    "id="+
    $(this).attr("id")+
    ",src="+
    $(this).attr("src"));
  }
  )
}
)

Demo

我要發表回答

立即登入回答