首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

Posted in Javascript onDecember 13, 2020

本文实例为大家展示了图片旋转、鼠标滚轮缩放、镜像、切换图片多重效果，提供了详细的代码，分享给大家供大家参考，具体内容如下

具体代码：

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
 <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title>
 <meta charset="utf-8" />
 <!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>-->
 <script type="text/javascript" src="js/abc.js"></script>
 </head>

 <body>

 <h1 style="text-align: center;color: blue;">效果预览</h1>
 <script>
 //容器对象
 var ImageTrans = function(container, options) {
 this._initialize(container, options);
 this._initMode();
 if (this._support) {
  this._initContainer();
  this._init();
 } else { //模式不支持
  this.onError("not support");
 }
 };
 ImageTrans.prototype = {
 //初始化程序
 _initialize: function(container, options) {
  var container = this._container = $$(container);
 this._clientWidth = container.clientWidth; //变换区域宽度
 this._clientHeight = container.clientHeight; //变换区域高度
 this._img = new Image(); //图片对象
 this._style = {}; //备份样式
 this._x = this._y = 1; //水平/垂直变换参数
 this._radian = 0; //旋转变换参数
 this._support = false; //是否支持变换
 this._init = this._load = this._show = this._dispose = $$.emptyFunction;
  var opt = this._setOptions(options);
  this._zoom = opt.zoom;
  this.onPreLoad = opt.onPreLoad;
  this.onLoad = opt.onLoad;
  this.onError = opt.onError;
  this._LOAD = $$F.bind(function() {
 this.onLoad();
 this._load();
 this.reset();
 this._img.style.visibility = "visible";
 }, this);
 $$CE.fireEvent(this, "init");
 },
 //设置默认属性
 _setOptions: function(options) {
  this.options = { //默认值
  mode: "css3|filter|canvas",
  zoom: .1, //缩放比率
  onPreLoad: function() {}, //图片加载前执行
  onLoad: function() {}, //图片加载后执行
  onError: function(err) {} //出错时执行
  };
  return $$.extend(this.options, options || {});
 },
 //模式设置
 _initMode: function() {
 var modes = ImageTrans.modes;
 this._support = $$A.some(this.options.mode.toLowerCase().split("|"), function(mode) {
 mode = modes[mode];
 if (mode && mode.support) {
 mode.init && (this._init = mode.init); //初始化执行程序
 mode.load && (this._load = mode.load); //加载图片执行程序
 mode.show && (this._show = mode.show); //变换显示程序
 mode.dispose && (this._dispose = mode.dispose); //销毁程序
 //扩展变换方法
 $$A.forEach(ImageTrans.transforms, function(transform, name) {
 this[name] = function() {
 transform.apply(this, [].slice.call(arguments));
 this._show();
 }
 }, this);
 return true;
 }
 }, this);
 },
 //初始化容器对象
 _initContainer: function() {
 var container = this._container,
 style = container.style,
 position = $$D.getStyle(container, "position");
 this._style = {
 "position": style.position,
 "overflow": style.overflow
 }; //备份样式
 if (position != "relative" && position != "absolute") {
 style.position = "relative";
 }
 style.overflow = "hidden";
 $$CE.fireEvent(this, "initContainer");
 },
 //加载图片
 load: function(src) {
 if (this._support) {
 var img = this._img,
 oThis = this;
 img.onload || (img.onload = this._LOAD);
 img.onerror || (img.onerror = function() {
 oThis.onError("err image");
 });
 img.style.visibility = "hidden";
 this.onPreLoad();
 img.src = src;
 }
 },
 //重置
 reset: function() {
 if (this._support) {
 this._x = this._y = 1;
 this._radian = 0;
 this._show();
 }
 },
 //销毁程序
 dispose: function() {
 if (this._support) {
 this._dispose();
 $$CE.fireEvent(this, "dispose");
 $$D.setStyle(this._container, this._style); //恢复样式
 this._container = this._img = this._img.onload = this._img.onerror = this._LOAD = null;
 }
 }
 };
 //变换模式
 ImageTrans.modes = function() {
 var css3Transform; //ccs3变换样式
 //初始化图片对象函数
 function initImg(img, container) {
 $$D.setStyle(img, {
 position: "absolute",
 border: 0,
 padding: 0,
 margin: 0,
 width: "auto",
 height: "auto", //重置样式
 visibility: "hidden" //加载前隐藏
 });
 container.appendChild(img);
 }
 //获取变换参数函数
 function getMatrix(radian, x, y) {
 var Cos = Math.cos(radian),
 Sin = Math.sin(radian);
 return {
 M11: Cos * x,
 M12: -Sin * y,
 M21: Sin * x,
 M22: Cos * y
 };
 }
 return {
 css3: { //css3设置
 support: function() {
 var style = document.createElement("div").style;
 return $$A.some(
 ["transform", "MozTransform", "webkitTransform", "OTransform"],
 function(css) {
 if (css in style) {
 css3Transform = css;
 return true;
 }
 });
 }(),
 init: function() {
 initImg(this._img, this._container);
 },
 load: function() {
 var img = this._img;
 $$D.setStyle(img, { //居中
 top: (this._clientHeight - img.height) / 2 + "px",
 left: (this._clientWidth - img.width) / 2 + "px",
 visibility: "visible"
 });
 },
 show: function() {
 var matrix = getMatrix(this._radian, this._y, this._x);
 //设置变形样式
 this._img.style[css3Transform] = "matrix(" + matrix.M11.toFixed(16) + "," + matrix.M21.toFixed(16) + "," + matrix.M12.toFixed(16) + "," + matrix.M22.toFixed(16) + ", 0, 0)";
 },
 dispose: function() {
 this._container.removeChild(this._img);
 }
 },
 filter: { //滤镜设置
 support: function() {
 return "filters" in document.createElement("div");
 }(),
 init: function() {
 initImg(this._img, this._container);
 //设置滤镜
 this._img.style.filter = "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand')";
 },
 load: function() {
 this._img.onload = null; //防止ie重复加载gif的bug
 this._img.style.visibility = "visible";
 },
 show: function() {
 var img = this._img;
 //设置滤镜
 $$.extend(
 img.filters.item("DXImageTransform.Microsoft.Matrix"),
 getMatrix(this._radian, this._y, this._x)
 );
 //保持居中
 img.style.top = (this._clientHeight - img.offsetHeight) / 2 + "px";
 img.style.left = (this._clientWidth - img.offsetWidth) / 2 + "px";
 },
 dispose: function() {
 this._container.removeChild(this._img);
 }
 },
 canvas: { //canvas设置
 support: function() {
 return "getContext" in document.createElement('canvas');
 }(),
 init: function() {
 var canvas = this._canvas = document.createElement('canvas'),
 context = this._context = canvas.getContext('2d');
 //样式设置
 $$D.setStyle(canvas, {
 position: "absolute",
 left: 0,
 top: 0
 });
 canvas.width = this._clientWidth;
 canvas.height = this._clientHeight;
 this._container.appendChild(canvas);
 },
 show: function() {
 var img = this._img,
 context = this._context,
 clientWidth = this._clientWidth,
 clientHeight = this._clientHeight;
 //canvas变换
 context.save();
 context.clearRect(0, 0, clientWidth, clientHeight); //清空内容
 context.translate(clientWidth / 2, clientHeight / 2); //中心坐标
 context.rotate(this._radian); //旋转
 context.scale(this._y, this._x); //缩放
 context.drawImage(img, -img.width / 2, -img.height / 2); //居中画图
 context.restore();
 },
 dispose: function() {
 this._container.removeChild(this._canvas);
 this._canvas = this._context = null;
 }
 }
 };
 }();
 //变换方法
 ImageTrans.transforms = {
 //垂直翻转
 vertical: function() {
 this._radian = Math.PI - this._radian;
 this._y *= -1;
 },
 //水平翻转
 horizontal: function() {
 this._radian = Math.PI - this._radian;
 this._x *= -1;
 },
 //根据弧度旋转
 rotate: function(radian) {
 this._radian = radian;
 },
 //向左转90度
 left: function() {
 this._radian -= Math.PI / 2;
 },
 //向右转90度
 right: function() {
 this._radian += Math.PI / 2;
 },
 //根据角度旋转
 rotatebydegress: function(degress) {
 this._radian = degress * Math.PI / 180;
 },
 //缩放
 scale: function() {
 function getZoom(scale, zoom) {
 return scale > 0 && scale > -zoom ? zoom :
 scale < 0 && scale < zoom ? -zoom : 0;
 }
 return function(zoom) {
 if (zoom) {
 var hZoom = getZoom(this._y, zoom),
 vZoom = getZoom(this._x, zoom);
 if (hZoom && vZoom) {
 this._y += hZoom;
 this._x += vZoom;
 }
 }
 }
 }(),
 //放大
 zoomin: function() {
 this.scale(Math.abs(this._zoom));
 },
 //缩小
 zoomout: function() {
 this.scale(-Math.abs(this._zoom));
 }
 };
 //拖动旋转
 ImageTrans.prototype._initialize = (function() {
 var init = ImageTrans.prototype._initialize,
 methods = {
 "init": function() {
 this._mrX = this._mrY = this._mrRadian = 0;
 this._mrSTART = $$F.bind(start, this);
 this._mrMOVE = $$F.bind(move, this);
 this._mrSTOP = $$F.bind(stop, this);
 },
 "initContainer": function() {
 $$E.addEvent(this._container, "mousedown", this._mrSTART);
 },
 "dispose": function() {
 $$E.removeEvent(this._container, "mousedown", this._mrSTART);
 this._mrSTOP();
 this._mrSTART = this._mrMOVE = this._mrSTOP = null;
 }
 };
 //开始函数
 function start(e) {
 var rect = $$D.clientRect(this._container);
 this._mrX = rect.left + this._clientWidth / 2;
 this._mrY = rect.top + this._clientHeight / 2;
 this._mrRadian = Math.atan2(e.clientY - this._mrY, e.clientX - this._mrX) - this._radian;
 $$E.addEvent(document, "mousemove", this._mrMOVE);
 $$E.addEvent(document, "mouseup", this._mrSTOP);
 if ($$B.ie) {
 var container = this._container;
 $$E.addEvent(container, "losecapture", this._mrSTOP);
 container.setCapture();
 } else {
 $$E.addEvent(window, "blur", this._mrSTOP);
 e.preventDefault();
 }
 };
 //拖动函数
 function move(e) {
 this.rotate(Math.atan2(e.clientY - this._mrY, e.clientX - this._mrX) - this._mrRadian);
 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
 };
 //停止函数
 function stop() {
 $$E.removeEvent(document, "mousemove", this._mrMOVE);
 $$E.removeEvent(document, "mouseup", this._mrSTOP);
 if ($$B.ie) {
 var container = this._container;
 $$E.removeEvent(container, "losecapture", this._mrSTOP);
 container.releaseCapture();
 } else {
 $$E.removeEvent(window, "blur", this._mrSTOP);
 };
 };
 return function() {
 var options = arguments[1];
 if (!options || options.mouseRotate !== false) {
 //扩展钩子
 $$A.forEach(methods, function(method, name) {
 $$CE.addEvent(this, name, method);
 }, this);
 }
 init.apply(this, arguments);
 }
 })();
 //滚轮缩放
 ImageTrans.prototype._initialize = (function() {
 var init = ImageTrans.prototype._initialize,
 mousewheel = $$B.firefox ? "DOMMouseScroll" : "mousewheel",
 methods = {
 "init": function() {
 this._mzZoom = $$F.bind(zoom, this);
 },
 "initContainer": function() {
 $$E.addEvent(this._container, mousewheel, this._mzZoom);
 },
 "dispose": function() {
 $$E.removeEvent(this._container, mousewheel, this._mzZoom);
 this._mzZoom = null;
 }
 };
 //缩放函数
 function zoom(e) {
 this.scale((
 e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3
 ) * Math.abs(this._zoom));
 e.preventDefault();
 };
 return function() {
 var options = arguments[1];
 if (!options || options.mouseZoom !== false) {
 //扩展钩子
 $$A.forEach(methods, function(method, name) {
 $$CE.addEvent(this, name, method);
  }, this);
  }
  init.apply(this, arguments);
 }
 })();
 </script>
 <style>
 #idContainer {
 border: 1px solid red;
 width: 1000px;
 height: 500px;
 background: black center no-repeat;
 margin: 0 auto;
 }

 input {
 margin: 10px;
 padding: 10px;
 border: 1px solid red;
 background: yellow;
 color: green;
 font-size: 16px;
 }

 #idSrc {
 width: auto;
 }
 </style>

 <div id="idContainer"></div>
 <input id="idLeft" value="向左旋转" type="button" />
 <input id="idRight" value="向右旋转" type="button" />
 <input id="idVertical" value="垂直翻转" type="button" />
 <input id="idHorizontal" value="水平翻转" type="button" />
 <input id="idReset" value="重置" type="button" />
 <input id="idCanvas" value="使用Canvas" type="button" />
 <input id="idSrc" value="img/07.jpg" type="text" />
 <input id="idLoad" value="换图" type="button" />
 <script>
 (function() {
 var container = $$("idContainer"),
 src = "img/7.jpg",
 options = {
 onPreLoad: function() {
 container.style.backgroundImage = "url('http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif')";
 },
 onLoad: function() {
 container.style.backgroundImage = "";
 },
 onError: function(err) {
 container.style.backgroundImage = "";
 alert(err);
 }
 },
 it = new ImageTrans(container, options);
 it.load(src);
 //垂直翻转
 $$("idVertical").onclick = function() {
  it.vertical();
  }
  //水平翻转
 $$("idHorizontal").onclick = function() {
 it.horizontal();
 }
 //左旋转
 $$("idLeft").onclick = function() {
  it.left();
  }
  //右旋转
 $$("idRight").onclick = function() {
 it.right();
 }
 //重置
 $$("idReset").onclick = function() {
  it.reset();
  }
  //换图
 $$("idLoad").onclick = function() {
 it.load($$("idSrc").value);
 }
 //Canvas
 $$("idCanvas").onclick = function() {
  if (this.value == "默认模式") {
  this.value = "使用Canvas";
  delete options.mode;
  } else {
  this.value = "默认模式";
  options.mode = "canvas";
  }
  it.dispose();
  it = new ImageTrans(container, options);
  it.load(src);
 }
 })()
 </script>

 </body>

</html>

abc.js

eval(function(p, a, c, k, e, r) {
 e = function(c) {
 return (c < 62 ? '' : e(parseInt(c / 62))) + ((c = c % 62) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
 };
 if ('0'.replace(0, e) == 0) {
 while (c--) r[e(c)] = k[c];
 k = [function(e) {
 return r[e] || e
 }];
 e = function() {
 return '([3-59cf-hj-mo-rt-yCG-NP-RT-Z]|[12]\\w)'
 };
 c = 1
 };
 while (c--)
 if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
 return p
}('4 $$,$$B,$$A,$$F,$$D,$$E,$$CE,$$S;(3(1K){4 O,B,A,F,D,E,CE,S;O=3(id){5"2f"==1L id?G

以上就是js代码实现图片旋转、鼠标滚轮缩放、镜像、切换图片等效果的代码，希望对大家学习javascript程序设计有所帮助。

图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

- Author -

李斌

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
详解钉钉小程序组件之自定义模态框（弹窗封装实现）
Mar 07 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
理解JavaScript中Promise的使用
Jan 18 #Javascript
你不知道的高性能JAVASCRIPT
Jan 18 #Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 #Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 #Javascript
jquery validate表单验证的基本用法入门
Jan 18 #Javascript
jQuery添加删除DOM元素方法详解
Jan 18 #Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 #Javascript
Spring Boot(5) Fragment(1) Spring-Retry(1) pt-archiver(1) ICF-5900W(2) Sqlite(2) TcpServer(1) 多线程(6) muduo(1) EventBus(1)
You might like
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python是编译运行的验证方法
2015/01/30 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python re模块的高级用法详解
2018/06/06 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
澳大利亚吉他在线：Artist Guitars
2017/03/30 全球购物
美国照明、家居装饰和家具购物网站：Bellacor
2017/09/20 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
联谊会主持词
2014/03/26 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
西安导游词
2015/02/12 职场文书
雾霾停课通知
2015/04/24 职场文书
实习介绍信范文
2015/05/05 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
小学教师见习总结
2015/06/23 职场文书
网吧管理制度范本
2015/08/05 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB