在頁(yè)面上需要裁減和縮放一張圖片是一個(gè)常見(jiàn)問(wèn)題?？s放圖片比較簡(jiǎn)單的方法是使用image的hight和width屬性。同樣地，裁剪圖片可以通過(guò)將圖像設置為元素背景并設置元素的高度和寬度來(lái)完成。無(wú)論如何，縮放和裁剪圖像都稍微復雜了一點(diǎn)。如果這需要經(jīng)常做，還是把圖像的裁剪和縮放交給一個(gè)類(lèi)（class）好一些。為此，我寫(xiě)了這個(gè)裁剪縮放器（Cropenscaler）。
思路是這樣的：創(chuàng )建一個(gè)特定大小的div元素，這是一個(gè)嵌套的div，在其中顯示相對定位的圖像。我發(fā)現定義默認圖像大小和裁剪位置的圖像數據哈希表非常有用。這些數值可以在幀建立的時(shí)候進(jìn)行調整，這時(shí)候，無(wú)所謂結果幀如何縮放，圖像都被定位于同樣的位置。
首先來(lái)檢測一下所需也要的CSS類(lèi)：
|
1
2
3
4
5
6
7
8
9
|
.croppenscaler { display: inline-block; overflow: hidden; } .croppenscaler img { position: relative; border: none; } |
上面需要說(shuō)明的重要屬性是croppenscaler的overflow使用。這暴政了首幀具有已設定的大小。嵌套的圖像采用相對定位。所有其他的CSS屬性需要寫(xiě)入style屬性中，因為他們必須在幀建立的時(shí)候計算得出。
下面的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è)類(lèi)有兩個(gè)函數。構造器為結果幀獲取了選項哈希表;圖像的關(guān)鍵幀和幀的高度與寬度。在這個(gè)版本中，構造器引用了imageData哈希表來(lái)獲取圖像細節用于顯示，但他們也能通過(guò)傳遞參數到函數中同樣實(shí)現。重要的是構造器能夠訪(fǎng)問(wèn)到幀的高度與寬度。當以默認寬度顯示的時(shí)候，則為默認的圖像寬度和top與left屬性（圖像左上角的位置）
buildFrame() 函數計算了尺寸并使用他們構建了幀div。使用嵌套的圖像來(lái)縮放以適應這個(gè)幀，后進(jìn)行定位同樣來(lái)適應這個(gè)縮放。
接下來(lái)使用這個(gè)類(lèi)，使用至少包括一個(gè)圖像關(guān)鍵幀、可選高度和寬度的哈希表創(chuàng )建新的Croppenscaler ，調用buildFrame()函數，將結果元素插入到頁(yè)面上。
|
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 版權所有：大連千億科技有限公司 遼ICP備11013762-3號 google網(wǎng)站地圖 百度網(wǎng)站地圖 網(wǎng)站地圖
公司地址：大連市沙河口區中山路692號辰熙星海國際2317 客服電話(huà)：0411-39943997 QQ：2088827823 37482752
法律聲明：未經(jīng)許可，任何模仿本站模板、轉載本站內容等行為者，本站保留追究其法律責任的權利！ 隱私權政策聲明
