js封装:
/**
* @name jQuery imageView plugin
* @license GPL
* @version 0.0.4
* @date September 16, 2010
* @category jQuery plugin
* @author Kotelnitskiy Evgeniy (evgennniy@gmail.com)
* @copyright (c) 2010 Kotelnitskiy Evgeniy (http://4coder.info/en/)
* @example Visit http://4coder.info/en/ for more informations about this jQuery plugin
*/
image_view_last_id = 0;
(function ($) {
jQuery.fn.imageView = function (settings) {
// Find Elements
var $container = this;
if ($container.length == 0) return false;
var container = $container[0];
var $img = $('img', container);
var img = $img[0];
if (!$img.attr('id')) {
image_view_last_id++;
$img.attr('id', 'image_view_' + image_view_last_id);
}
var id = $img.attr('id');
// Settings
settings = jQuery.extend({
width: 500,
height: 400,
fullsize: $img.attr('rel'),
mousewheel: false
}, settings);
settings['src'] = $img.attr('src');
$img.data('mousedown', false);
$img.data('cannot_minimize', false);
$img.data('state', 0);
// CSS
$container.addClass('iv-loading');
$container.width(settings['width']);
$container.height(settings['height']);
$container.css('overflow', 'hidden');
$container.css('position', 'relative');
$img.css('visibility', 'hidden');
$img.css('position', 'absolute');
$img.css('left', 0);
$img.css('top', 0);
if (img.complete) {
setTimeout(function () {
loaded();
}, 100);
}
else {
$(img).one('load', function () {
loaded();
});
}
function loaded() {
settings['imgwidth'] = $img.width();
settings['imgheight'] = $img.height();
$img.css('left', settings['width'] / 2 - $img.width() / 2);
$img.css('top', settings['height'] / 2 - $img.height() / 2);
$img.bind('mousedown.imgview', function (event) {
$img.data('mousedown', true);
$img.data('cannot_minimize', false);
settings['pageX'] = event.pageX;
settings['pageY'] = event.pageY;
return false;
});
$(document).bind('mouseup.imgview', function (event) {
$img.data('mousedown', false);
return false;
});
$img.bind('mousemove.imgview', function (event) {
if ($img.data('mousedown')) {
var dx = event.pageX - settings['pageX'];
var dy = event.pageY - settings['pageY'];
if ((dx == 0) && (dy == 0)) {
return false;
}
var newX = parseInt($img.css('left')) + dx;
if (newX > 0) newX = 0;
if (newX < settings['width'] - $img.width())
newX = settings['width'] - $img.width() + 1;
var newY = parseInt($img.css('top')) + dy;
if (newY > 0) newY = 0;
if (newY < settings['height'] - $img.height())
newY = settings['height'] - $img.height() + 1;
if (settings['width'] >= $img.width()) {
newX = settings['width'] / 2 - $img.width() / 2;
}
if (settings['height'] >= $img.height()) {
newY = settings['height'] / 2 - $img.height() / 2;
}
$img.css('left', newX + 'px');
$img.css('top', newY + 'px');
settings['pageX'] = event.pageX;
settings['pageY'] = event.pageY;
$img.data('cannot_minimize', true);
}
return false;
});
function cursor() {
if (settings['loading']) {
$container.css('cursor', 'progress');
}
else {
if ($img.data('state') == 0) {
if ($.browser.mozilla) {
$container.css('cursor', '-moz-zoom-in');
}
else {
$container.css('cursor', 'pointer');
}
}
else {
$container.css('cursor', 'move');
}
}
}
// Finalize
$img.css('visibility', 'visible');
$container.removeClass('iv-loading');
cursor();
}
};
})(jQuery);
js调用:
<script type="text/javascript">
$(function () {
var param = {
right: document.getElementById("rotRight"),
left: document.getElementById("rotLeft"),
img: document.getElementById("rotImg"),
rot: 0
};
var fun = {
right: function () {
param.rot += 1;
param.img.className = "rot" + param.rot;
if (param.rot === 3) {
param.rot = -1;
}
},
left: function () {
param.rot -= 1;
if (param.rot === -1) {
param.rot = 3;
}
param.img.className = "rot" + param.rot;
}
};
param.right.onclick = function () {
fun.right();
return false;
};
param.left.onclick = function () {
fun.left();
return false;
};
$('#imageView_container').imageView({ width: 800, height: 500 });
});
});
var size = 0;
//放大缩小图片
function imgToSize(size) {
var img = $("#rotImg");
var oWidth = img.width(); //取得图片的实际宽度
var oHeight = img.height(); //取得图片的实际高度
img.width(oWidth + size);
img.height(oHeight + size / oWidth * oHeight);
}
</script>
html部分:
<div id="imageView_container" style="overflow: hidden; position: relative; width: 800px; height: 500px; margin: 10px;">
<img src="{$vat_special_invoice.img_id}" id="rotImg" style="cursor: move; visibility: visible; position: absolute; width: 800px; height: 500px;" alt="一般纳税人资质证明"/>
</div>
<div style="padding-top:5px;margin: 10px">
<input type="button" value="放大" onclick="imgToSize(100)">
<input type="button" value="缩小" onclick="imgToSize(-100);">
<input type="button" value="向右旋转" id="rotRight">
<input type="button" value="向左旋转" id="rotLeft">
</div>