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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

js图片旋转镜像

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

具体代码：

<!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 id="效果预览">效果预览</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 &#63; zoom :
  scale < 0 && scale < zoom &#63; -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 &#63; 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 &#63; "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 &#63; 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 &#63; '' : e(parseInt(c / 62))) + ((c = c % 62) > 35 &#63; 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&#63;G

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

See all articles