| div+js内部实现图片旋转,放大,缩小,拖拽 |
| 来源：智睿 浏览：1578 次 发布时间：2020-03-09 15:14:57 |
web应用程序某处功能会接收来自各个户上传的图片，后台有个图片查看功能，实际生产过程中的结果出现了用户上传的图片是倒转的或者图片因为远距离拍摄上传的比较模糊的情况。
1、解决图片角度的问题 大概原理很简单，切换HTML元素对象（图片）的class。如下CSS代码： .rot1{transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);} .rot2{transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);} .rot3{transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
再添加简单的JavaScript代码——根据是向左转还是向右转动态改变class的名称就行了。再次提示下，IE8浏览器是使用的是-ms-filter直接filter没有效果。 2、图片放大缩小 即为调整图片的宽和高。如下核心代码 
//放大缩小图片 function imgToSize(size) { var img = $("#rotImg"); var oWidth = img.width(); //取得图片的实际宽度 var oHeight = img.height(); //取得图片的实际高度 img.width(oWidth + size); img.height(oHeight + size / oWidth * oHeight); }
3、区域内拖动图片 图片放大超过父级容器时，支持图片在容器内拖动，在mousedown的条件下绑定mousemove，计算拖拽区域大小，核心代码如下：
$(document).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;
});
4、综合功能实现代码如下，运行请底部下载demo
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style type="text/css"> .rot1 { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .rot2 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .rot3 { -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } #imageView_container{ border: 2px solid #000000; } style> <script src="js/jquery-1.10.2.js">script> <script src="js/jquery-browser.js">script> <script src="js/jquery.imageView.js">script> head> <body> <div id="imageView_container" style="overflow: hidden; position: relative; width: 800px; height: 500px; "> <img src="images/1.jpg" id="rotImg" style="cursor: move; visibility: visible; position: absolute; width: 800px; height: 500px;" /> div> <div style="padding-top:5px;"> <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> <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> body> html>
5、最终效果如下图所示：
6、示例代码下载地址： https://github.com/mszhtech/ImageView |
| 【刷新页面】【加入收藏】【打印此文】 【关闭窗口】 |
| 上一篇：智睿网络投票评选管理系统 V 10.7.8 优秀评选大赛系统,投票评选活动系统 下一篇：智睿录取查询报名系统 V 10.0.5 2020年全新录取查询系统 春季招生系统 |
