js手写图片查看器(图片的缩放、旋转、拖拽)

一、关于图片查看器。

  目前网络上能找到的图片查看器很多,谁便一搜就能出来。如: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得赋值,如果不赋值的化,默认值是无法获取然后不能参加后续的运算,就无法实现对应的效果!

上一篇:企业级的响应式设计(Responsive design at enterprise level)译


下一篇:15个关于Chrome的开发必备小技巧