JS等比例縮小圖片尺寸的實例
更新時間：2013年02月27日 14:15:42 作者：
JS等比例縮小圖片尺寸的實例，需要的朋友可以參考一下
為了提升用戶體驗，網(wǎng)站用戶在上傳圖片的時候，我們不能夠讓用戶自己去處理圖片以達到我們的要求。
而通常像淘寶上商品實物展示這樣的頁面，我們需要控制的主要是圖片的寬度。
又考慮到html頁面解析順序可能導(dǎo)致的一些問題，決定通過定義一個簡單的功能函數(shù)，然后在img元素中添加onload事件來調(diào)用的方式進行實現(xiàn)，代碼如下：
JS部分
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function changeImg(objImg)
{
var most = 690; //設(shè)置最大寬度
if(objImg.width > most)
{
var scaling = 1-(objImg.width-most)/objImg.width;
//計算縮小比例
objImg.width = objImg.width*scaling;
objImg.height = objImg.height; //img元素沒有設(shè)置高度時將自動等比例縮小
//objImg.height = objImg.height*scaling; //img元素設(shè)置高度時需進行等比例縮小
}
}
</script>
HTML調(diào)用部分
復(fù)制代碼 代碼如下:
<img src="" onload="changeImg(this);" />
您可能感興趣的文章:
- JS簡單的圖片放大縮小的兩種方法
- JS+css 圖片自動縮放自適應(yīng)大小
- JS網(wǎng)頁圖片查看器(兼容IE、FF)可控制圖片放大縮小移動
- JavaScript 圖片放大鏡（可拖放、縮放效果）
- js 圖片等比例縮放代碼
- javascript 圖片放大縮小功能實現(xiàn)代碼
- 關(guān)于圖片按比例自適應(yīng)縮放的js代碼
- JS 圖片縮放效果代碼
- js與自動伸縮圖片 自動縮小圖片的多瀏覽器兼容的方法總結(jié)
- JavaScript實現(xiàn)網(wǎng)頁圖片等比例縮放實現(xiàn)代碼及調(diào)用方式
- JS網(wǎng)頁圖片按比例自適應(yīng)縮放實現(xiàn)方法
- javascript簡單實現(xiàn)等比例縮小圖片的方法
相關(guān)文章
可能被忽略的一些JavaScript數(shù)組方法細節(jié)
這篇文章主要給大家介紹了一些可能被忽略的JavaScript數(shù)組方法細節(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
JavaScript 對象深入學(xué)習(xí)總結(jié)(經(jīng)典)
JavaScript中，除了五種原始類型（即數(shù)字，字符串，布爾值，null，undefined）之外的都是對象了，所以，不把對象學(xué)明白怎么繼續(xù)往下學(xué)習(xí)呢？本篇文章給大家分享javascript對象深入學(xué)習(xí)總結(jié)，小伙伴們跟著小編一起深入學(xué)習(xí)吧2015-09-09
JS判斷元素是否在數(shù)組內(nèi)的實現(xiàn)代碼
這篇文章主要介紹了JS判斷元素是否在數(shù)組內(nèi)的實現(xiàn)代碼,需要的朋友可以參考下2016-03-03
防抖和節(jié)流函數(shù)是工作中兩種常用的前端性能優(yōu)化函數(shù),今天我就來總結(jié)一下什么是防抖和節(jié)流,并詳細說明一下如何在工作中應(yīng)用防抖和節(jié)流函數(shù),需要的朋友可以參考下2023-08-08
Javascript & DHTML DOM基礎(chǔ)和基本API
DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla的瀏覽器最與標準接近。2008-07-07
這篇文章主要為大家介紹了全解跨域請求問題處理方法及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
微信小程序webview與h5通過postMessage實現(xiàn)實時通訊的實現(xiàn)
這篇文章主要介紹了微信小程序webview與h5通過postMessage實現(xiàn)實時通訊的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript使用addEventListener添加事件監(jiān)聽用法實例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實例分析了addEventListener方法的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
TypeScript聯(lián)合類型,交叉類型和類型保護
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護，聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，交叉類型就是需要滿足所有類型，交叉類型使用，更多內(nèi)容我們來看看下面文章詳細內(nèi)容吧2021-12-12
這篇文章主要介紹了webpack 從指定入口文件中提取公共文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11