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

时间：2025-03-29 14:15:20


更多内容请看我的博客：


浏览器：

FireFox   44.0.2

Chrome   47.0.2526.111

脚本：

jQuery 1.11.3

  1.1

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

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

	// 翻转图片
	function imgReverse(arg)
	{
		var img = $("#Imgbox");
		if (arg == 'h')
		{
			(
			{
				'filter' : 'fliph',
				'-moz-transform' : 'matrix(-1, 0, 0, 1, 0, 0)',
				'-webkit-transform' : 'matrix(-1, 0, 0, 1, 0, 0)'
			});
		} else
		{
			(
			{
				'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/'  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>


相关文章