jQuery点击放大缩小图片尺寸的方法

一.尺寸方法

a）.获取方法

.height( ) 获取到高度

.width( )获取到宽度

b）.设置方法

.height(‘值’ ) 设置高度

.width(‘值’ )设置宽度

二.放大图片尺寸

a）.公示

1.新宽=先给原宽度增加5PX

2.新高=（新宽*原高）/原款=宽

b）.案例

注意：请先引入jq后再使用

<img src="img/id.jpg" alt="" width="400" height="300"> <!-- 先插入一个图片并给其设置高宽 -->
<br><br>
<input type="button" name="" id="" value="放大" onclick="big()"/> <!-- 点击放大按钮时，调用名为big的函数 -->
<script>
	function big(){
		let $oldWidth = $('img').width();//通过标签选择器选中图片后通过.width()获取到宽度，并给予一个变量将其装起来
		let $oldHeight = $('img').height();//通过标签选择器选中图片后通过.height()获取到高度，并给予一个变量将其装起来
				
		// 通过公示开始计算大小
		let $newHeight = $oldHeight + 5;//给宽增加5px
		let $newWidth = ($oldWidth * $oldHeight) / $oldHeight;//新高=（新宽*原高）/原宽
				
		//设置新的高和宽
		$('img').height($newHeight);
		$('img').width($newWidth);
	}
</script>

三.缩小图片尺寸

a）.公示

1.新宽=先给原宽度减5PX

2.新高=（新宽*原高）/原款=宽

b）.案例

注意：请先引入jq后再使用

<img src="img/id.jpg" alt="" width="400" height="300"> <!-- 先插入一个图片并给其设置高宽 -->
<br><br>
<input type="button" name="" id="" value="放大" onclick="big()"/> <!-- 点击放大按钮时，调用名为big的函数 -->
<script>
	function big(){
		let $oldWidth = $('img').width();//通过标签选择器选中图片后通过.width()获取到宽度，并给予一个变量将其装起来
		let $oldHeight = $('img').height();//通过标签选择器选中图片后通过.height()获取到高度，并给予一个变量将其装起来
				
		// 通过公示开始计算大小
		let $newHeight = $oldHeight - 5;//给宽减少5px
		let $newWidth = ($oldWidth * $oldHeight) / $oldHeight;//新高=（新宽*原高）/原宽
				
		//设置新的高和宽
		$('img').height($newHeight);
		$('img').width($newWidth);
	}
</script>