首页
所有分类
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 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
详解webpack打包vue时提取css
May 26 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
邀请函(127) 表扬信(62) 心得体会(660) 道歉信(39) 证婚词(21) 欢迎词(65) 思想汇报(404) 演讲稿(869) 职业生涯规划书(234) 介绍信(57)
You might like
smarty简单入门实例
2014/11/28 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js实现进度条的方法
2015/02/13 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python中对列表排序实例
2015/01/04 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
Puppeteer使用示例详解
2019/06/20 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
python中str内置函数用法总结
2020/12/27 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
玛蒂尔达简服装：Matilda Jane Clothing
2019/02/13 全球购物
JNI的定义
2012/11/25 面试题
学习新党章思想汇报
2014/01/09 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
个人简历自荐信
2014/06/26 职场文书
研修心得体会
2014/09/04 职场文书
信仰心得体会
2014/09/05 职场文书
股东出资证明书（正规版）
2014/09/24 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
云台山导游词
2015/02/03 职场文书
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL