一、关于图片查看器。
目前网络上能找到的图片查看器很多，谁便一搜就能出来。如：jquery.iviewer.js、Viewer.js这两个js文件，其中功能也足够满足大部分开发需求。但是单纯的就想实现图片的缩放、旋转、回位、拖拽。这些插件就有些多余，而且里面代码还没看。所以这里向大家介绍一种图片查看器的实现方法！
二、简单的Demo构造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> </style>
<script type="text/javascript"> function load() {
init();
} // 缩放图片
function imgToSize(oBool) {
var pic = document.getElementById("pic");
var text=document.getElementById("smw");
pic.style.zoom = parseInt(pic.style.zoom) + (oBool ? 2 : -2) + '%';
text.defaultValue=pic.style.zoom;
}
//还原尺寸
function restore() {
var pic = document.getElementById("pic");
var text=document.getElementById("smw");
pic.style.zoom = '100%';
pic.style.left = "0px";
pic.style.top = "0px";
text.defaultValue=pic.style.zoom;
}
// 旋转图片
var current = 0;
function imgRoll(direction) {
var pic = document.getElementById("pic");
if (direction == "left") {
current = (current - 90) % 360;
}
else if (direction == "right") {
current = (current + 90) % 360;
}
pic.style.transform = 'rotate(' + current + 'deg)';
}
//图片拖拽
drag = 0;
move = 0;
function mousedown() {
if (drag) {
X1 = window.event.x - parseInt(pic.style.left);
Y1 = window.event.y - parseInt(pic.style.top);
move = 1;
}
}
function onmouseover() {
drag = 1;
}
function mouseStop() {
window.event.returnValue = false;
}
function mousemove() {
if (move) {
pic.style.left = (window.event.x - X1) + "px";
pic.style.top = (window.event.y - Y1) + "px";
}
}
function mouseup() {
move = 0;
}
function init() {
var pic = document.getElementById("pic");
pic.style.zoom="100%";
pic.style.left="0px";
pic.style.top="0px";
pic.style.position="relative";
pic.style.cursor="move";
document.all.pic.onmouseover = onmouseover;
document.all.pic.onmousemove = mousemove;
document.all.pic.onmousedown = mousedown;
document.all.pic.onmouseup = mouseup;
document.all.pic.ondragstart = mouseStop;
}
</script>
</head>
<body onload="load()">
<div>
<img id="pic" src="data:image/Hydrangeas.jpg" />
</div> <br/>
<div class="btn">
<button class="btnleft" onclick="imgRoll('left');">左旋转90度</button>
<button class="btnright" onclick="imgRoll('right');">右旋转90度</button>
<button class="btnup" onclick="imgToSize(1);">放大</button>
<button class="btndown" onclick="imgToSize(0);">缩小</button>
<button class="btnreturn" onclick="restore();">还原</button>
<input type="text" value="100%" id="smw"/>
</div>
</body></html>
三、代码功能实现和说明
其实图片查看器，其中的原理就是实现图片的Zoom、Tranfrom、坐标的控制
1、缩放功能
// 缩放图片
function imgToSize(oBool) {
var pic = document.getElementById("pic");
var text=document.getElementById("smw");
pic.style.zoom = parseInt(pic.style.zoom) + (oBool ? 2 : -2) + '%';
text.defaultValue=pic.style.zoom;
}
这方法就是，每次点击一次控制图片的Zoom增减。其中oBool是用来区别是放大和缩小（就是ZooM的缩减）
2、图片的旋转
// 旋转图片
var current = 0;
function imgRoll(direction) {
var pic = document.getElementById("pic");
if (direction == "left") {
current = (current - 90) % 360;
}
else if (direction == "right") {
current = (current + 90) % 360;
}
pic.style.transform = 'rotate(' + current + 'deg)';
}
这方法就是，每点击一次图片按顺时针或逆时针旋转，direction是来区分顺（right）逆(left)旋转的方向。
3、图片的还原
function restore() {
var pic = document.getElementById("pic");
var text=document.getElementById("smw");
pic.style.zoom = '100%';
pic.style.left = "0px";
pic.style.top = "0px";
text.defaultValue=pic.style.zoom;
}
这方法就是，将图片从新初始化
4、图片的拖拽
//图片拖拽
drag = 0;
move = 0;
function mousedown() {
if (drag) {
X1 = window.event.x - parseInt(pic.style.left);
Y1 = window.event.y - parseInt(pic.style.top);
move = 1;
}
}
function onmouseover() {
drag = 1;
}
function mouseStop() {
window.event.returnValue = false;
}
function mousemove() {
if (move) {
pic.style.left = (window.event.x - X1) + "px";
pic.style.top = (window.event.y - Y1) + "px";
}
}
function mouseup() {
move = 0;
}
这个方法就是，实现这个首先对鼠标几个事件的了解mousedwon()鼠标的按下事件、onmouseover()鼠标在对应标签上方事件、mouseStop()鼠标停止运动事件、mousemove()鼠标移动事件、mouseup()松开鼠标键的事件。然后再看代码定义2个标准变量drag、move
5、初始化，也就是得注意事项
function init() {
var pic = document.getElementById("pic");
pic.style.zoom="100%";
pic.style.left="0px";
pic.style.top="0px";
pic.style.position="relative";
pic.style.cursor="move";
document.all.pic.onmouseover = onmouseover;
document.all.pic.onmousemove = mousemove;
document.all.pic.onmousedown = mousedown;
document.all.pic.onmouseup = mouseup;
document.all.pic.ondragstart = mouseStop;
}
初始化市将控制按钮绑定对应的事件，然后再将图片的样式属性，其中top、left得赋值，如果不赋值的化，默认值是无法获取然后不能参加后续的运算，就无法实现对应的效果！