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