JavaScript使用三種方式實作修改圖像大小詳解
- 黄舟原創
- 2017-07-26 13:57:061651瀏覽
大家知道，豐富多彩的Web網路課件離不開圖片的支持，圖像在增加網頁生動性的同時，也增加了網頁的大小，使下載速度減慢。在網站中如何讓一張圖片能以適當大小在頁面上顯示是值得研究的問題。為此，筆者把自己的一些經驗寫出來供廣大從事腳本編寫者參考，以此共勉。
需求分析：本網站採用新聞管理系統，首頁新聞欄位中，需要從資料庫中呼叫圖片檔案作為圖片新聞中的圖片，從而形成文字繞排形式。根據佈局需要，圖片的寬度不能超過200px。
要讓圖片以適當大小顯示的問題，實質是一個大圖片等比例縮小的問題。如何透過圖像的URL獲得圖像的大小（width,height）是問題的關鍵，假設k=Width/Height表示圖像的比例值，當K>=1時，只要width不超過200px，則height一定0335825ee99f31f7b330b1c2f5cb2d5b=1限定width，K1baa05a3bc1d43eac6dd04e61131314e中的ID，定義圖的寬度和高度
頁面的873c4d80998f5627c84fe017b9b46671元素可以定義其顯示範圍，即圖的高度Height和寬度（Width）。處理事件觸發時，動態地改變圖的兩個屬性就可達到效果。
<script>
functionshow()
{var w,h;
var k;
var con;
w=smallslot.width;
h=smallslot.height;
k=w/h;
if(k>=1){
if (w>=200){
w=200;
h=w/k;
}}
else
{if(h>=150){
h=150;
w=k?h;
}
}
return w;
}
</script>
<imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
<script languge="javascript">
varx=show();
</script>在這段程式碼中，將處理後的影像的width作為show()函數的回傳值。在873c4d80998f5627c84fe017b9b46671中用onload事件呼叫映像的Width。
問題：首頁的圖片新聞圖片沒有顯示，點選網址列中的「轉到」按鈕，才能正常顯示。實踐告訴我又一次失敗！因為上網者惟一習慣做的是輸入網址、鍵入回車這兩個動作。在此基礎上，筆者做了以下嘗試： （1）93f0f5c25f18dab9d176bd4f6de5d30e和9c3bca370b5104690d9ef395f2c5f8d1之間加入“1d455c0487951f640ab51b2b9deb260e 」。每隔10秒自動刷新螢幕，結果圖片能正常顯示，但不斷刷螢幕讓視覺很不舒服。 （2）window.location.reload()重新裝載頁面，可是結果是一直處於裝載頁面過程中，使網頁無法正確顯示。 （3）90e1350e84a8f29eab9528462a6ae8d9200) this.width=200;"align="left">，測試能夠通過，但如果圖像widtha23a33cef605d42ef148b4a7ce9e0cd6200px，則頁面顯示效果為高度超過150。這樣如果沒有K=width或K=height的約束，頁面效果是不合理的，因此不能採用。
方案三：將873c4d80998f5627c84fe017b9b46671中的Onload()事件放到ff8b6c3e371e9f96acceec65cada5d84中完成裝載頁面時事件的觸發
仔細分析方案二，筆者發現主要原因是onload事件是頁面載入時觸發的事件。 Onload在9617a69a9711c47d4c7e5f42d8a4909e元素中使用，當IE解釋到此處，需裝載頁面才能觸發“javascript:width=x;”，因此要重新裝載頁面才能顯示圖片。另外，Onload()一般用在9c5594a5fc8d2e506f1a8147102c836b元素中，預先完成裝載頁面時觸發的事件。所以，我把873c4d80998f5627c84fe017b9b46671中的Onload()事件放到了9c5594a5fc8d2e506f1a8147102c836b中去，程式碼如下：
<body onload="window.smallslot.width=show();">
<script>
function show()
{…..
//show()
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest! 再次测试，通过了，而且首页调用成功！我成功了！ 经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。
以上是JavaScript使用三種方式實作修改圖像大小詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！