图片旋转放大缩小代码

dly · 发表于 2011-4-13 19:42:01

<!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>
<title>图片效果</title>
<meta name="Author" content="51js-zmm">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script Language="javascript">
// 缩放图片
function imgToSize(oBool) {
var oImg = document.all('oImg');
oImg.style.zoom = parseInt(oImg.style.zoom) + (oBool ? 2 : -2) + '%';
}
// 旋转图片
var oArcSize = 1;
function imgRoll() {
var oImg = document.all('oImg');
oImg.style.filter = 'ProgidXImageTransform.Microsoft.BasicImage(Rotation='+ oArcSize +')';
oArcSize += 1;
oArcSize = oArcSize==4 ? 0 : oArcSize ;
}
// 翻转图片
function imgReverse(arg) {
var oImg = document.all('oImg');
oImg.style.filter = 'Flip' + arg;
}
// 拖动图片
var oBoolean = false, oLeftSpace = 0, oTopSpace = 0;
function mStart() {
oBoolean = true;
if (oBoolean) {
var oImg = document.all('oImg');
oLeftSpace = window.event.clientX - oImg.style.pixelLeft;
oTopSpace = window.event.clientY - oImg.style.pixelTop;
}
}
function mEnd() {
oBoolean = false;
}
function document.onmousemove() {
if (window.event.button==1 && oBoolean) {
var oImg = document.all('oImg');
oImg.style.pixelLeft = window.event.clientX - oLeftSpace;
oImg.style.pixelTop = window.event.clientY - oTopSpace;
return false;
}
}
</script>
</head>
<body>
<div align="center">
<img id="oImg" src="http://www.discuz.net/release/dzx15/images/top2.jpg" style="position:relative; zoom:100%; cursor:move;" onmousedown="mStart();" onmouseup="eEnd
();"><br><br>
<input type="button" value="放大" onclick="imgToSize(1);">
<input type="button" value="缩小" onclick="imgToSize(0);">
<input type="button" value="旋转" onclick="imgRoll();">
<input type="button" value="水平翻转" onclick="imgReverse('H');">
<input type="button" value="垂直翻转" onclick="imgReverse('V');">
</div>
</body>
</html>

复制代码

qqoxygen · 发表于 2011-5-15 20:59:56

好像不错的样子

summmer · 发表于 2011-5-16 21:59:38

强人，佩服死了。

月之海洋 · 发表于 2011-6-17 12:00:21

很好的,我喜欢

lilac_yao · 发表于 2011-6-22 01:59:40

强人，佩服死了。

Cute宝贝儿 · 发表于 2011-6-25 21:59:55

支持!好东西，拿走了！

[代码修改] 图片旋转放大缩小代码

相关帖子