首页
所有分类
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 精粹读书笔记(1,2)
Feb 07 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
实测jquery data()如何存值
Aug 18 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JavaScript中的Array 对象（数组对象）
Jun 02 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
SSL(3) 二级域名(1) Centos(8) lamp(1) URL重定向(3) 前后端分离(1) 压力测试(1) 443(1) lnmp(1) 跨域(4)
You might like
新52大事件
2020/03/03 欧美动漫
cmd下运行php脚本
2008/11/25 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
phpmyadmin安装时提示：Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
vue-axios使用详解
2017/05/10 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
python创建进程fork用法
2015/06/04 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
大学生的网上创业计划书
2013/12/31 职场文书
人事助理自荐信
2014/02/02 职场文书
小学作文评语大全
2014/04/21 职场文书
家长学校培训材料
2014/08/20 职场文书
信仰心得体会
2014/09/05 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
学校团代会开幕词
2016/03/04 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
原生JS封装vue Tab切换效果
2021/04/28 Vue.js