close
Blogtrottr
♣梅問題‧教學網【Minwt】♣
分享關於Photoshop教學|商品攝影|網頁教學|Wordpress教學|iPhone教學| Flash教學|jQuery教學...等 
Own the Game.

Elevate your game with the newest adidas men's soccer footwear and apparel.
From our sponsors
jQuery套件《Mu Image Resize》圖片自動縮放與裁切居中
Nov 5th 2013, 01:30, by admin

梅問題-jQuery套件－《Mu Image Resize》 圖片自動縮圖與裁切居中
　　很早之前梅干曾想過，將圖片縮到指定的大小後，再設定顯示範圍，再把抓取圖片中間的區域位置，當時光寫完圖片自動縮圖的機制後，就讓梅干死了不少的腦細胞，再加上梅干的數理不好，除了數字算半天外，再來就是程式的邏輯架構一直鬼擋牆，好在身旁有位高手男丁的協助下，才讓梅干的圖片縮圖順利完成，但心中還是一直掛念著裁切的部分，而那一天卻在網路上，無意間的發現到MRMU STUDIO的網誌中，自製分享了一隻縮圖裁切的jQuery外掛，讓使用者可以自行的設定的顯示區塊範圍，程式就會自動縮放圖片到指定範圍中，由於該外掛需在script中作設定，所以梅干稍稍的加工一下，讓它除了可透過script中來設定外，也可直接在img的標籤中來作設定，讓使用上更加的方便，因此有需要的朋友，不妨參考看看囉！！
Mu Image Resize 縮圖裁切外掛：
下載完畢，除了引用jQuery與mu.image.resize.js檔後，使用方法有二種：
方法一、在Script中設定：

$('.resize).muImageResize({width: 150, height:150}); //當這樣設定時，所有resize下的圖片都會縮成150×150


說明：

resize：圖片的類別名稱
width:150：圖片的寬度
height:150：圖片的高度

方法二、在img標籤中設定：

1.Script中插入$('.c_resize').muImageResize();
2.<img src="圖片檔名" class="c_resize" data-w="300" data-h="300"> //使用此方法，可自行設定每一張圖片的大小


說明：

c_resize：圖片的類別名稱
data-w="300"：圖片的寬度
data-h="300"：圖片的高度

梅問題-jQuery套件－《Mu Image Resize》 圖片自動縮圖與裁切居中
設定好後，圖片就會依照指定的尺寸，縮到指定的範圍中。
梅問題-jQuery套件－《Mu Image Resize》 圖片自動縮圖與裁切居中
[範例預覽]
分享給更多朋友 分享

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 jmuko90 的頭像
    jmuko90

    2016【韓劇】奶酪陷阱劇情簡介及人物介紹奶酪陷阱 EP03 預告奶酪陷阱 線上看奶酪陷阱(捕鼠器裡的奶酪) 第1集

    jmuko90 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄