div内部实现图片旋转、放大、缩小、拖拽
药药，切克闹，一人我编码累，累把那bug写成堆。秋高气爽空气干燥你一定dei多喝水，过完了这周我就要回去、趁还有几天、你尽情的来跟我怼~~~
新的一年，很久没更博客了，眼看十一要来了，听说过了十一就等过年了，但是感觉刚过完年一样，心里黯然神伤，更博一篇以表对小白驹过隙之神速聊以慰藉下……
在开发中这样一个场景，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没有效果。
这里使用的是CSS3+filter滤镜的方法，所以低版本的Firefox以目前版本的Opera浏览器下式没有效果的。但绝对适用于90%以上的互联网用户了。
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>Title</title> <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="data: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
div内部实现图片旋转、放大、缩小、拖拽的更多相关文章
- JS中图片的放大缩小没反应
这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
- vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
- Android DIY之路 （一） 指定区域多图片合成 放大 缩小 镜像 旋转 等（转）
惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...
- jquery 实现点击图片居住放大缩小
该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...
- Android 本地/网路下载图片实现放大缩小
Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...
- Java界面程序实现图片的放大缩小
Java界面程序实现图片的放大缩小.这个程序简单地实现了图片的打开.保存.放大一倍.缩小一倍和固定缩放尺寸,但是并没有过多的涵盖对图片的细节处理,只是简单地实现了图片大小的放缩. 思维导图如下: 效果 ...
- 用css3实现图片的放大缩小
记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...
- Android 图片的放大缩小拖拉
package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...
随机推荐
- Extjs6获取Grid里的数据(数据源)
{ xtype: 'grid', sortableColumns: false, reference: 'grid', flex: 1, store: 'panoram.Panoram', colum ...
- 四种JavaScript隐式类型转换的总结
一般存在四种情况,JavaScript会对变量的数据类型进行转换. 目录 * if中的条件会被自动转为Boolean类型 * 会被转为false的数据 * 会被转为true的数据 * 参与+运算都会被 ...
- 数据库索引B-树和B+树
一开始学习数据结构的时候,主要学习的是数组,队列,链表,队列,栈,树这些数据结构,其中树主要学习二叉树,平衡二叉树,二叉搜索树等这些子节点最多只有两个的树结构.但是,当我们接触数据库的时候,你会发现数 ...
- C++异常处理机制
商业转载请联系作者获得授权,非商业转载请注明出处. 一.什么是异常 -异常是程序中可以检测到的不正常的情况. -示例:被0除.数组越界.存储空间不足等. -早期我们使用if来判断,然后进行相关处理,或 ...
- 银河麒麟操作系统U盘手动挂载，出现乱码
使用银河麒麟操作系统,U盘手动挂载,U盘中中文字符显示为乱码?? 对于银河麒麟操作系统的这一问题,可能是因为字符集的原因,需要在mount后加参数: sudo mount –o iochar ...
- Info模式下的隐形杀手(SpringMVC同时使用<mvc:resources.../>和FormattingConversionServiceFactoryBean时出现的问题)
天气一天比一天变的凉快了,而我一天天踩的坑更加贱了,首先在北京向各位问好,也给身边献身教育事业的亲朋好友们补上一句节日快乐! 今天早上手贱把项目误删了,不得不去SVN上去乞求了.我个人习惯项目运行的时 ...
- 区块链下的io域名到底有多神秘？
不知大家发现没有 一些科技创业公司首选域名后缀 是.IO WHY? 因为给人一种很酷的感觉啊~ 譬如,极客届享誉盛名的盘古越狱团队官网:http://pangu.io 国内优质社区,简书--创作你的创 ...
- django 5 form1
---------------------Form表单验证(用户请求验证+生成HTML标签) 示例:用户管理 a. 添加用户页面 - 显示HTML标签 - 提交:数据验证 - 成功之后保存 - 错误显 ...
- AOP TP框架有感
自学AOP感觉面向切面编程是一种利器,同时也是一种潜在的威胁.他就像一把手术刀,无论哪个器官有问题他都可以把他切开,修复它,但是使用的多了身体也会受不了... AOP应该算是面向对象的一种补充,但是, ...
- Beta版本冲刺计划安排
1.介绍小组新加入的成员,Ta担任的角色 王婧:web界面以及前端和后台的交互 柯怡芳:PM以及文档 陈艺菡:修复bug以及文档 钱惠:web界面以及前端和后台的交互 林凯:测试人员 吴伟君(新成员) ...