图片旋转、鼠标滚轮缩放、镜像、切换图片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 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的bugthis._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程序设计有所帮助。