JS---改變圖片大小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>改變圖片大小 方法1</title>
<script>
function showbigger(){
var div=document.getElementById("div");
div.style.width=500+"px";
div.style.height=500+"px";
}
function showsmaller(){
var div=document.getElementById("div");
div.style.width=100+"px";
div.style.height=100+"px"; //注意獲取的ID時img的ID
}
</script>
</head>
<body>
<button onclick="showbigger()">放大</button>
<button onclick="showsmaller()">縮小</button>
<div style="width: 100px;height: 100px"><img src='img/1.jpg' id="div" ></div>
</body>
</html>
方法2：html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>圖片放大縮小</title>
</head>
<body>
<p align="center">
<input type="button" value="放大" onclick="blowup()">
<input type="button" value="縮小" onclick="reduce()">
</p>
<table width="300" border="0" align="center">
<tr>
<td>
<div align="center">
<input name="img" type="image" id="img" src="1.jpg" align="middle" border="0">
</div>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
function blowup(){
var height=img.height;
var width=img.width;
if((height<=height*2)||(width<=width*2)){ //能夠無限放大
img.height=img.height+20;
img.width=img.width+20;
}
}
function reduce(){
if((img.height>100)||(img.width>100)){ //能夠縮小到寬或者高等於100px時的大小
img.height=img.height-20;
img.width=img.width-20;
}
}
</script>
</p>
<div align="center"></div>
<p> </p>
</body>
</html>
相關文章
- 1. Canvas繪製心電圖——改變波幅（JS按鈕改變Canvas圖片大小）
- 2. 改變seekbar的遊標圖片大小
- 3. 經過拖拽改變圖片大小
- 4. 改變figure大小存儲圖片(matlab)
- 5. 改變圖片文件的大小
- 6. android 動態改變圖片大小
- 7. js改變div大小
- 8. 旋轉變換，變換後改變圖片大小
- 9. js 控制圖片大小
- 10. js圖片放大縮小
- 更多相關文章...
- • Markdown 圖片 - Markdown 教程
- • PHP image2wbmp - 輸出WBMP圖片 - PHP參考手冊
- • JDK13 GA發佈：5大特性解讀
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Canvas繪製心電圖——改變波幅（JS按鈕改變Canvas圖片大小）
- 2. 改變seekbar的遊標圖片大小
- 3. 經過拖拽改變圖片大小
- 4. 改變figure大小存儲圖片(matlab)
- 5. 改變圖片文件的大小
- 6. android 動態改變圖片大小
- 7. js改變div大小
- 8. 旋轉變換，變換後改變圖片大小
- 9. js 控制圖片大小
- 10. js圖片放大縮小