JS等比例縮小圖片尺寸的實(shí)例

更新時(shí)間：2013年02月27日 14:15:42 作者：

JS等比例縮小圖片尺寸的實(shí)例，需要的朋友可以參考一下

為了提升用戶體驗(yàn)，網(wǎng)站用戶在上傳圖片的時(shí)候，我們不能夠讓用戶自己去處理圖片以達(dá)到我們的要求。

而通常像淘寶上商品實(shí)物展示這樣的頁面，我們需要控制的主要是圖片的寬度。

又考慮到html頁面解析順序可能導(dǎo)致的一些問題，決定通過定義一個簡單的功能函數(shù)，然后在img元素中添加onload事件來調(diào)用的方式進(jìn)行實(shí)現(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;    
         //計(jì)算縮小比例
         objImg.width = objImg.width*scaling;
         objImg.height = objImg.height;            //img元素沒有設(shè)置高度時(shí)將自動等比例縮小

         //objImg.height = objImg.height*scaling;    //img元素設(shè)置高度時(shí)需進(jìn)行等比例縮小
     }

 }
 </script>

HTML調(diào)用部分

復(fù)制代碼代碼如下:

您可能感興趣的文章:

相關(guān)文章

可能被忽略的一些JavaScript數(shù)組方法細(xì)節(jié)
這篇文章主要給大家介紹了一些可能被忽略的JavaScript數(shù)組方法細(xì)節(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(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)的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS判斷元素是否在數(shù)組內(nèi)的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-03-03
淺談JavaScript中的防抖和節(jié)流
防抖和節(jié)流函數(shù)是工作中兩種常用的前端性能優(yōu)化函數(shù),今天我就來總結(jié)一下什么是防抖和節(jié)流,并詳細(xì)說明一下如何在工作中應(yīng)用防抖和節(jié)流函數(shù),需要的朋友可以參考下
2023-08-08
Javascript & DHTML DOM基礎(chǔ)和基本API
DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標(biāo)準(zhǔn)，每個瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近。
2008-07-07
全解跨域請求問題處理方法及分析
這篇文章主要為大家介紹了全解跨域請求問題處理方法及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-07-07
微信小程序webview與h5通過postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序webview與h5通過postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實(shí)例分析了addEventListener方法的相關(guān)使用技巧,需要的朋友可以參考下
2015-06-06
TypeScript聯(lián)合類型,交叉類型和類型保護(hù)
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護(hù)，聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，交叉類型就是需要滿足所有類型，交叉類型使用，更多內(nèi)容我們來看看下面文章詳細(xì)內(nèi)容吧
2021-12-12
webpack 從指定入口文件中提取公共文件的方法
這篇文章主要介紹了webpack 從指定入口文件中提取公共文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11