jQuery实现图片放大，缩小，翻转，旋转小实例

最新推荐文章于 2024-08-16 09:24:41 发布

jakinoy

最新推荐文章于 2024-08-16 09:24:41 发布

阅读量5.3k

点赞数

分类专栏： jQuery 文章标签： jQuery 图片放大缩小翻转

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

更多内容请看我的博客：https://www.jakinoy.com

浏览器：

FireFox 44.0.2

Chrome 47.0.2526.111

脚本：

jQuery 1.11.3

jQuery.rotate 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查看图片</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.rotate.js"></script>
<script type="text/javascript">
	var size = 0;

	//放大缩小图片
	function imgToSize(size)
	{
		var img = $("#Imgbox");
		var oWidth = img.width(); //取得图片的实际宽度
		var oHeight = img.height(); //取得图片的实际高度
		img.width(oWidth + size);
		img.height(oHeight + size / oWidth * oHeight);
	}

	// 翻转图片
	function imgReverse(arg)
	{
		var img = $("#Imgbox");
		if (arg == 'h')
		{
			img.css(
			{
				'filter' : 'fliph',
				'-moz-transform' : 'matrix(-1, 0, 0, 1, 0, 0)',
				'-webkit-transform' : 'matrix(-1, 0, 0, 1, 0, 0)'
			});
		} else
		{
			img.css(
			{
				'filter' : 'flipv',
				'-moz-transform' : 'matrix(1, 0, 0, -1, 0, 0)',
				'-webkit-transform' : 'matrix(1, 0, 0, -1, 0, 0)'
			});
		}
	}
</script>
</head>
<body>
	<img id='Imgbox' src='image/Jakin.png'  style="position:relative; zoom:100%;  cursor:move;"/>
	<br />
	<br />
	<input type="button" value="放大" οnclick="imgToSize(100)" />
	<input type="button" value="缩小" οnclick="imgToSize(-100);"/>
	<input type="button" value="向左旋转" οnclick="$('#Imgbox').rotateLeft(90);"/> 
	<input type="button" value="向右旋转" οnclick="$('#Imgbox').rotateRight(90)"/>
	<input type="button" value="水平翻转" οnclick="imgReverse('h');"/> 
	<input type="button" value="垂直翻转" οnclick="imgReverse('v');"/>
</body>
</html>