div内部实现图片旋转、放大、缩小、拖拽
2017-09-26 14:18
781 查看
药药,切克闹,一人我编码累,累把那bug写成堆。秋高气爽空气干燥你一定dei多喝水,过完了这周我就要回去、趁还有几天、你尽情的来跟我怼~~~
新的一年,很久没更博客了,眼看十一要来了,听说过了十一就等过年了,但是感觉刚过完年一样,心里黯然神伤,更博一篇以表对小白驹过隙之神速聊以慰藉下……
在开发中这样一个场景,web应用程序某处功能会接收来自各个户上传的图片,后台有个图片查看功能,实际生产过程中的结果出现了用户上传的图片是倒转的或者图片因为远距离拍摄上传的比较模糊的情况。
1、[b]解决图片角度的问题[/b]
大概原理很简单,切换HTML元素对象(图片)的class。如下CSS代码:
再添加简单的JavaScript代码——根据是向左转还是向右转动态改变class的名称就行了。再次提示下,IE8浏览器是使用的是
这里使用的是CSS3+filter滤镜的方法,所以低版本的Firefox以目前版本的Opera浏览器下式没有效果的。但绝对适用于90%以上的互联网用户了。
2、图片放大缩小
即为调整图片的宽和高。如下核心代码
3、区域内拖动图片
图片放大超过父级容器时,支持图片在容器内拖动,在mousedown的条件下绑定mousemove,计算拖拽区域大小,核心代码如下:
[b]4、综合功能实现代码如下,运行请底部下载demo[/b]
[b]5、最终效果如下图所示:[/b]
[b]6、示例代码下载地址: https://github.com/mszhtech/ImageView[/b]
新的一年,很久没更博客了,眼看十一要来了,听说过了十一就等过年了,但是感觉刚过完年一样,心里黯然神伤,更博一篇以表对小白驹过隙之神速聊以慰藉下……
在开发中这样一个场景,web应用程序某处功能会接收来自各个户上传的图片,后台有个图片查看功能,实际生产过程中的结果出现了用户上传的图片是倒转的或者图片因为远距离拍摄上传的比较模糊的情况。
1、[b]解决图片角度的问题[/b]
大概原理很简单,切换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; });
[b]4、综合功能实现代码如下,运行请底部下载demo[/b]
<!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="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>
[b]5、最终效果如下图所示:[/b]
[b]6、示例代码下载地址: https://github.com/mszhtech/ImageView[/b]
相关文章推荐
- div内部实现图片旋转、放大、缩小、拖拽
- jquery实现图片放大,缩小,翻转,旋转小实例
- ExtJs 完美实现图片在Window窗口中通过鼠标滚轮放大缩小以及点击拖拽
- 基于RxPaparazzo实现图片裁剪、图片旋转、比例放大缩小功能
- Android实现旋转,放大,缩小图片的方法
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- vue实现裁切图片同时实现放大、缩小、旋转功能
- Android实现图片反转、翻转、旋转、放大和缩小
- 安卓实现图片旋转放大缩小
- 基于rapheal图片放大 缩小 旋转 拖拽 双击
- android实现对图片的放大缩小旋转等操作
- iOS开发——手势识别器(用手势实现图片旋转和缩小放大)
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- javascript实现对图片的随意拖拽,放大缩小
- jquery实现图片放大,缩小,翻转,旋转小实例
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- js实现图片旋转 js滚动鼠标中间对图片放大缩小
- JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- Andriod SeekBar以及实现图片旋转平移放大缩小