網(wǎng)頁里控制圖片大小的相關代碼
更新時間：2006年06月13日 00:00:00 作者：
１、用鼠標拖動來改變大小
２、用鼠標滾動控制圖片大小
３、圖片標簽里用代碼控制大小
４、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元素 判斷其寬度并做相應操作
<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)">
２、用鼠標滾動控制圖片大小
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">
３、圖片標簽里用代碼控制大小
<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元素 判斷其寬度并做相應操作
相關文章
js面向對象編程OOP及函數(shù)式編程FP區(qū)別
這篇文章主要為大家介紹了js面向對象編程OOP及函數(shù)式編程FP的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了JavaScript高級程序設計之變量與作用域，文章主要通過描述原始值與引用值、instanceof、作用域展開具體內容,需要的朋友可以參考一下2021-11-11
這篇文章主要給大家分享的時JavaScript 對象創(chuàng)建的3種方法,在 JavaScript中，對象是一組有屬性名和屬性值組成的無序集合，對象的創(chuàng)建可以通過對象字面量、new 關鍵字 和Object.create()函數(shù)來創(chuàng)建。2021-11-11
這篇文章主要介紹了微信小程序中input標簽詳解及簡單實例的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了最近火爆全網(wǎng)的?Evil.js?源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了利用 JavaScript 構建命令行應用，下面文章圍繞如何利用JavaScript 構建命令行應用的相關資料炸開詳細內容,需要的朋友可以參考一下2021-11-11
accesskey 提交...2006-06-06
這篇文章主要介紹了微信小程序canvas寫字板效果及實例的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 navigation API實例詳解的相關資料,需要的朋友可以參考下2016-10-10
詳解微信小程序 通過控制CSS實現(xiàn)view隱藏與顯示
這篇文章主要介紹了微信小程序 通過控制CSS實現(xiàn)view隱藏與顯示的相關資料,需要的朋友可以參考下2017-05-05