JS等比例縮小圖片尺寸的實(shí)例
為了提升用戶體驗(yàn),網(wǎng)站用戶在上傳圖片的時(shí)候,我們不能夠讓用戶自己去處理圖片以達(dá)到我們的要求。
而通常像淘寶上商品實(shí)物展示這樣的頁(yè)面,我們需要控制的主要是圖片的寬度。
又考慮到html頁(yè)面解析順序可能導(dǎo)致的一些問(wèn)題,決定通過(guò)定義一個(gè)簡(jiǎn)單的功能函數(shù),然后在img元素中添加onload事件來(lái)調(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元素沒(méi)有設(shè)置高度時(shí)將自動(dòng)等比例縮小
//objImg.height = objImg.height*scaling; //img元素設(shè)置高度時(shí)需進(jìn)行等比例縮小
}
}
</script>
HTML調(diào)用部分
<img src="" onload="changeImg(this);" />
- JS簡(jiǎn)單的圖片放大縮小的兩種方法
- JS+css 圖片自動(dòng)縮放自適應(yīng)大小
- JS網(wǎng)頁(yè)圖片查看器(兼容IE、FF)可控制圖片放大縮小移動(dòng)
- JavaScript 圖片放大鏡(可拖放、縮放效果)
- js 圖片等比例縮放代碼
- javascript 圖片放大縮小功能實(shí)現(xiàn)代碼
- 關(guān)于圖片按比例自適應(yīng)縮放的js代碼
- JS 圖片縮放效果代碼
- js與自動(dòng)伸縮圖片 自動(dòng)縮小圖片的多瀏覽器兼容的方法總結(jié)
- JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)圖片等比例縮放實(shí)現(xiàn)代碼及調(diào)用方式
- JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法
- javascript簡(jiǎn)單實(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下每次滾動(dòng)觸發(fā)三次bug說(shuō)明
今天測(cè)試發(fā)現(xiàn)IE6下用window.onscroll,每次滾動(dòng)時(shí)會(huì)觸發(fā)3次,而火狐、IE7沒(méi)此問(wèn)題,應(yīng)該是IE6的一個(gè)BUG2011-09-09CountUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)增值效果
這篇文章主要為大家詳細(xì)介紹了CountUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)增值效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10uni-app動(dòng)態(tài)修改主題色的方法詳解
最近在看uniapp開(kāi)發(fā)app時(shí)需要實(shí)現(xiàn)動(dòng)態(tài)修改主題色的功能,這篇文章主要給大家介紹了關(guān)于uni-app動(dòng)態(tài)修改主題色的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12基于JavaScript實(shí)現(xiàn)雪花許愿墻特效
新的一年就要到了,你一定有很多想許下的愿望吧!今天小編就為大家?guī)?lái)了一個(gè)基于Html+CSS+JavaScript實(shí)現(xiàn)的帶雪花的許愿墻特效,需要的可以了解一下2022-01-01微信小程序?qū)崿F(xiàn)音樂(lè)播放頁(yè)面布局
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)京東商品分類側(cè)邊欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12