首页
所有分类
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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
js 上传图片预览问题
Dec 06 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
js实现上传图片到服务器
Apr 11 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
OpenAI baselines(1) OpenGL(1) Flask Web(1) tkFileDialog(1) BeautifulSoup4(2) Odoo(1) 面向接口(1) tfx(1) ElementTree(1) SeaTunnel(1)
You might like
一个MYSQL操作类
2006/11/16 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
ExtJS 学习专题（一） 如何应用ExtJS（附实例）
2010/03/11 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
W Concept美国：精选全球独立设计师
2017/02/22 全球购物
加拿大高尔夫超市：Golf Town
2018/01/12 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
查环查孕证明
2014/01/10 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
横店影视城导游词
2015/02/06 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers