在頁面上需要裁減和縮放一張圖片是一個(gè)常見問題?？s放圖片比較簡單的方法是使用image的hight和width屬性。同樣地，裁剪圖片可以通過將圖像設(shè)置為元素背景并設(shè)置元素的高度和寬度來完成。無論如何，縮放和裁剪圖像都稍微復(fù)雜了一點(diǎn)。如果這需要經(jīng)常做，還是把圖像的裁剪和縮放交給一個(gè)類（class）好一些。為此，我寫了這個(gè)裁剪縮放器（Cropenscaler）。
思路是這樣的：創(chuàng)建一個(gè)特定大小的div元素，這是一個(gè)嵌套的div，在其中顯示相對定位的圖像。我發(fā)現(xiàn)定義默認(rèn)圖像大小和裁剪位置的圖像數(shù)據(jù)哈希表非常有用。這些數(shù)值可以在幀建立的時(shí)候進(jìn)行調(diào)整，這時(shí)候，無所謂結(jié)果幀如何縮放，圖像都被定位于同樣的位置。
首先來檢測一下所需也要的CSS類：
|
1
2
3
4
5
6
7
8
9
|
.croppenscaler { display: inline-block; overflow: hidden; } .croppenscaler img { position: relative; border: none; } |
上面需要說明的重要屬性是croppenscaler的overflow使用。這暴政了首幀具有已設(shè)定的大小。嵌套的圖像采用相對定位。所有其他的CSS屬性需要寫入style屬性中，因?yàn)樗麄儽仨氃趲⒌臅r(shí)候計(jì)算得出。
下面的Javascript使用了Prototype框架，但使用JQuery或別的javascript庫也能完成同樣的事情。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
var imageData = { kittah: { width:900, top:-175, left:-165, url: '/blogs/assets/jcato/images/Kittah.jpg' }, }; var Croppenscaler = Class.create(); Croppenscaler.prototype = { initialize: function(options) { var image = imageData[options.image]; this.url = image.url; this.frameHeight = options.height || 400; this.frameWidth = options.width || 300; var scale = this.frameWidth / 300; this.imageWidth = (image.width) * scale; this.positionTop = (image.top) * scale; this.positionLeft = (image.left) * scale; }, buildFrame: function() { var img = new Element('img',{src:this.url, 'class':'zoom'}); img.setStyle({ width: this.imageWidth+'px', top: this.positionTop+'px', left: this.positionLeft+'px', }); var frame = new Element('div',{'class':'croppenscaler'}); frame.update(img); frame.setStyle({ height:this.frameHeight+'px', width:this.frameWidth+'px', }); return frame; }, }; |
這個(gè)類有兩個(gè)函數(shù)。構(gòu)造器為結(jié)果幀獲取了選項(xiàng)哈希表;圖像的關(guān)鍵幀和幀的高度與寬度。在這個(gè)版本中，構(gòu)造器引用了imageData哈希表來獲取圖像細(xì)節(jié)用于顯示，但他們也能通過傳遞參數(shù)到函數(shù)中同樣實(shí)現(xiàn)。重要的是構(gòu)造器能夠訪問到幀的高度與寬度。當(dāng)以默認(rèn)寬度顯示的時(shí)候，則為默認(rèn)的圖像寬度和top與left屬性（圖像左上角的位置）
buildFrame() 函數(shù)計(jì)算了尺寸并使用他們構(gòu)建了幀div。使用嵌套的圖像來縮放以適應(yīng)這個(gè)幀，后進(jìn)行定位同樣來適應(yīng)這個(gè)縮放。
接下來使用這個(gè)類，使用至少包括一個(gè)圖像關(guān)鍵幀、可選高度和寬度的哈希表創(chuàng)建新的Croppenscaler ，調(diào)用buildFrame()函數(shù)，將結(jié)果元素插入到頁面上。
|
1
2
3
4
5
6
7
|
var loadImages = function() { $('cats').insert(new Croppenscaler({image:'kittah'}).buildFrame()); $('cats').insert(new Croppenscaler({image:'kittah',height:300}).buildFrame()); $('cats').insert(new Croppenscaler({image:'kittah',width:400,height:250}).buildFrame()); $('cats').insert(new Croppenscaler({image:'kittah',width:200,height:300}).buildFrame()); $('cats').insert(new Croppenscaler({image:'kittah',width:100,height:150}).buildFrame()); } |
上面的代碼將產(chǎn)生下面這群貓（的圖像效果）。
Copyright@ 2011-2016 版權(quán)所有：大連千億科技有限公司 遼ICP備11013762-3號 google網(wǎng)站地圖 百度網(wǎng)站地圖 網(wǎng)站地圖
公司地址：大連市沙河口區(qū)中山路692號辰熙星海國際2317 客服電話：0411-39943997 QQ：2088827823 37482752
法律聲明：未經(jīng)許可，任何模仿本站模板、轉(zhuǎn)載本站內(nèi)容等行為者，本站保留追究其法律責(zé)任的權(quán)利！ 隱私權(quán)政策聲明
