JS等比例縮小圖片尺寸的實(shí)例
為了提升用戶體驗(yàn),網(wǎng)站用戶在上傳圖片的時(shí)候,我們不能夠讓用戶自己去處理圖片以達(dá)到我們的要求。
而通常像淘寶上商品實(shí)物展示這樣的頁面,我們需要控制的主要是圖片的寬度。
又考慮到html頁面解析順序可能導(dǎo)致的一些問題,決定通過定義一個(gè)簡單的功能函數(shù),然后在img元素中添加onload事件來調(diào)用的方式進(jìn)行實(shí)現(xiàn),代碼如下:
JS部分
<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)用部分
<img src="" onload="changeImg(this);" />
- JS簡單的圖片放大縮小的兩種方法
- JS+css 圖片自動縮放自適應(yīng)大小
- JS網(wǎng)頁圖片查看器(兼容IE、FF)可控制圖片放大縮小移動
- JavaScript 圖片放大鏡(可拖放、縮放效果)
- js 圖片等比例縮放代碼
- javascript 圖片放大縮小功能實(shí)現(xiàn)代碼
- 關(guān)于圖片按比例自適應(yīng)縮放的js代碼
- JS 圖片縮放效果代碼
- js與自動伸縮圖片 自動縮小圖片的多瀏覽器兼容的方法總結(jié)
- JavaScript實(shí)現(xiàn)網(wǎng)頁圖片等比例縮放實(shí)現(xiàn)代碼及調(diào)用方式
- JS網(wǎng)頁圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法
- javascript簡單實(shí)現(xiàn)等比例縮小圖片的方法
相關(guān)文章
JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作示例
這篇文章主要介紹了JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作,結(jié)合實(shí)例形式分析了棧與隊(duì)列的操作原理及javascript使用數(shù)組實(shí)現(xiàn)棧與隊(duì)列的相關(guān)技巧,需要的朋友可以參考下2018-12-12JavaScript實(shí)現(xiàn)數(shù)字前補(bǔ)“0”的五種方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字前補(bǔ)“0”的五種方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)字前補(bǔ)0的相關(guān)操作技巧,涉及javascript字符串遍歷、迭代、截取、構(gòu)造等操作,需要的朋友可以參考下2019-01-01關(guān)于onScroll事件在IE6下每次滾動觸發(fā)三次bug說明
今天測試發(fā)現(xiàn)IE6下用window.onscroll,每次滾動時(shí)會觸發(fā)3次,而火狐、IE7沒此問題,應(yīng)該是IE6的一個(gè)BUG2011-09-09CountUp.js實(shí)現(xiàn)數(shù)字滾動增值效果
這篇文章主要為大家詳細(xì)介紹了CountUp.js實(shí)現(xiàn)數(shù)字滾動增值效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10基于JavaScript實(shí)現(xiàn)雪花許愿墻特效
新的一年就要到了,你一定有很多想許下的愿望吧!今天小編就為大家?guī)砹艘粋€(gè)基于Html+CSS+JavaScript實(shí)現(xiàn)的帶雪花的許愿墻特效,需要的可以了解一下2022-01-01