js圖片自動縮放_jS控制圖片的放大和縮小

A. js控制圖片的放大和縮小

用js控制圖片額大小。主要是修改圖片的寬度和高度。下面是簡單的代碼實專現：

HTML 代碼：

<imgsrc='../1.jgp'id='img'/>

這個時候img的圖屬片自身是多大，就會顯示多大。100px*100px的圖。

js代碼：

varoImg=document.getElementById('img');
oImg.width='50px';//當給img標簽的寬度設置為50px後，高度會自動按比例縮小。
oImg.width='200px'//當給img標簽的寬度設置為200px後，高度會自動按比例擴大。

B. 如何讓網頁中的圖片自動縮小

1、用滑鼠拖動來改變大小
以下是代碼片段：
<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)">

2、用滑鼠滾動控制圖片大小
以下是代碼片段：
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">

3、圖片標簽里用代碼控制大小
以下是代碼片段：
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">

4、CSS控制圖片大小
1. css2直接實現: img{max-width: 500px;} (IE暫不支持)
2. expression實現: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素遍歷img元素判斷其寬度並做相應操作
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～·～
當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。

實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接：
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>
其中<a>標記的href屬性指定全尺寸圖片的URL，target屬性設置為_blank指定在新窗口中顯示該圖片；<img>標記的src屬性指定縮略圖的URL。

如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調用 window.open 方法，該方法接收三個參數，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態欄、菜單欄，寬、高分別為400、350的窗口中：
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>

這里就提出了個問題，如果所有全尺寸圖片都具有統一的大小（比如都是400x350），那麼以上代碼適用於所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小並不統一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然後在window.open方法的窗口特性參數中一一設置height和width為正確的值，在圖片數量較多的情況下，這顯然效率太低了。那麼是否有一勞永逸的方法，即讓彈出窗口能自動適應要顯示圖片的大小？通過研究，發現可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設置彈出窗口的大小，即可實現自適應圖片大小的彈出窗口了。下面即是實現代碼:

<script language="JavaScript" type="text/JavaScript">

</script>

使用時將上面的代碼放在網頁文檔的<head></head>標記對中，然後在鏈接的點擊事件中調用OpenFullSizeWindow函數，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代碼在IE 5.x－6.0中測試通過。

C. js圖片輪換里如何等比例縮放圖片

希望對你有幫助比例縮放圖片代碼如下：<script language="javascript">
function zone(){
var ben=0.5;//縮小倍數
var zone=document.getElementById("img");
var kuan=zone.width;//原圖寬
var gao=zone.height;//原圖高
//計算高和寬
var new_kuan=kuan*ben;
var new_gao=gao*ben;
//給id=xin的img賦值
document.getElementById("xin").src=zone.src;
document.getElementById("xin").height=new_gao;
document.getElementById("xin").w=new_kuan;

document.getElementById("gao").value=gao;//顯示高
document.getElementById("kuan").value=kuan;//顯示寬
}
</script> <img id="img" src="images/ad03.gif" border="0" />

<input type="button" onclick="zone();" value="獲得"/>

高：<div><input type="text" id="gao" /></div>
寬：<div><input type="text" id="kuan" /></div>
顯示：<img id="xin"/>

D. 圖片按比例縮放js

E. 求一個簡單的點擊圖片放大縮小的JS代碼

1、准備好需要用到的圖標。

F. 如何利用JS或者CSS樣式來自動調整圖片大小

js版和css版自動按比例調整圖片大小方法，分別如下：

<title>javascript圖片大小處理函數</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>

純css的防止圖片撐破頁面的代碼，圖片會自動按比例縮小：

<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>


<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>

導航:首頁 > 編程語言 > js圖片自動縮放

js圖片自動縮放

與js圖片自動縮放相關的資料

友情鏈接