網(wǎng)頁里控制圖片大小的相關(guān)代碼
更新時(shí)間：2006年06月13日 00:00:00 作者：
１、用鼠標(biāo)拖動(dòng)來改變大小
２、用鼠標(biāo)滾動(dòng)控制圖片大小
３、圖片標(biāo)簽里用代碼控制大小
４、CSS控制圖片大小
1. css2直接實(shí)現(xiàn): img{max-width: 500px;} (IE暫不支持)
2. expression實(shí)現(xiàn): img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍歷img元素 判斷其寬度并做相應(yīng)操作
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">
２、用鼠標(biāo)滾動(dòng)控制圖片大小
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">
３、圖片標(biāo)簽里用代碼控制大小
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">
經(jīng)測(cè)試這里需要修改一下，不然刷新網(wǎng)頁時(shí)圖片會(huì)顯示原始大小。<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.resized=true;this.style.width=screen.width-500;">
４、CSS控制圖片大小
1. css2直接實(shí)現(xiàn): img{max-width: 500px;} (IE暫不支持)
2. expression實(shí)現(xiàn): img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍歷img元素 判斷其寬度并做相應(yīng)操作
相關(guān)文章
這篇文章主要介紹了微信小程序 slider的簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了WebAssembly使用方法研究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了微信小程序組件之srcoll-view的詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
微信小程序 五星評(píng)價(jià)功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 五星評(píng)價(jià)功能的實(shí)現(xiàn)的相關(guān)資料,這里附有實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2017-03-03
autojs使用intent發(fā)送郵件帶附件實(shí)現(xiàn)示例
這篇文章主要為大家介紹了autojs使用intent發(fā)送郵件帶附件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了vscode工具函數(shù)once使用示例深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JavaScript中時(shí)間格式化新思路toLocaleString()
這篇文章主要介紹了JavaScript中時(shí)間格式化新思路toLocaleString()，研究Object對(duì)象的時(shí)候，看到了 toLocaleString() 這個(gè)方法可以很簡(jiǎn)單的實(shí)現(xiàn)時(shí)間格式化，下面來看看toLocaleString() 的詳細(xì)內(nèi)容吧,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家介紹了Three.js引用和環(huán)境搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解
這篇文章主要為大家介紹了JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序網(wǎng)絡(luò)請(qǐng)求wx.request詳解及實(shí)例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求wx.request詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05