测试兼容ie6,firefox3.6,chrome 10.0.648.133
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="</script'>https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="</script'>http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.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='http://www.google.com/intl/en_ALL/images/logo.gif' style="position:relative; zoom:100%; cursor:move;"/>
<br />
<input type="button" value="放大" οnclick="imgToSize(50)" >
<input type="button" value="缩小" οnclick="imgToSize(-50);">
<input type="button" value="向右旋转" οnclick="$('#Imgbox').rotateRight(-15)">
<input type="button" value="向左旋转" οnclick="$('#Imgbox').rotateRight(15);">
<input type="button" value="水平翻转" οnclick="imgReverse('h');">
<input type="button" value="垂直翻转" οnclick="imgReverse('v');">
</BODY>
</HTML>
欢迎加我的qq技术群425783133
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
