網(wǎng)頁(yè)里控制圖片大小的相關(guān)代碼
更新時(shí)間：2006年06月13日 00:00:00 作者：
１、用鼠標(biāo)拖動(dòng)來(lái)改變大小
２、用鼠標(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)頁(yè)時(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)文章
js面向?qū)ο缶幊蘋(píng)OP及函數(shù)式編程FP區(qū)別
這篇文章主要為大家介紹了js面向?qū)ο缶幊蘋(píng)OP及函數(shù)式編程FP的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JavaScript高級(jí)程序設(shè)計(jì)之變量與作用域
這篇文章主要介紹了JavaScript高級(jí)程序設(shè)計(jì)之變量與作用域，文章主要通過(guò)描述原始值與引用值、instanceof、作用域展開(kāi)具體內(nèi)容,需要的朋友可以參考一下2021-11-11
JavaScript 對(duì)象創(chuàng)建的3種方法
這篇文章主要給大家分享的時(shí)JavaScript 對(duì)象創(chuàng)建的3種方法,在 JavaScript中，對(duì)象是一組有屬性名和屬性值組成的無(wú)序集合，對(duì)象的創(chuàng)建可以通過(guò)對(duì)象字面量、new 關(guān)鍵字 和Object.create()函數(shù)來(lái)創(chuàng)建。2021-11-11
微信小程序中input標(biāo)簽詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序中input標(biāo)簽詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了最近火爆全網(wǎng)的?Evil.js?源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
利用 JavaScript 構(gòu)建命令行應(yīng)用
這篇文章主要介紹了利用 JavaScript 構(gòu)建命令行應(yīng)用，下面文章圍繞如何利用JavaScript 構(gòu)建命令行應(yīng)用的相關(guān)資料炸開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
accesskey 提交...2006-06-06
這篇文章主要介紹了微信小程序canvas寫(xiě)字板效果及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 navigation API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
詳解微信小程序 通過(guò)控制CSS實(shí)現(xiàn)view隱藏與顯示
這篇文章主要介紹了微信小程序 通過(guò)控制CSS實(shí)現(xiàn)view隱藏與顯示的相關(guān)資料,需要的朋友可以參考下2017-05-05