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

页面导航:首页 > 网络编程 > JavaScript > 图片旋转,鼠标滚轮缩放,镜像,切换图片js代码

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

来源: 作者: 时间:2016-01-23 10:23 【

demo下载地 址:http: download csdn net detail cometwo 9404811感谢博客:http: www cnblogs com cloudgamer archive 2010 08 16 ImageTrans html 图片旋转,鼠标滚轮缩

这里写图片描述

demo下载地 址:

<script type="text/javascript" src="js/abc.js"></script>

效果预览

<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>
 
<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>

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.getElementById(id):id};O.emptyFunction=3(){};O.extend=3(Q,13,1v){9(1v===1K)1v=14;J(4 R x 13){9(1v||!(R x Q)){Q[R]=13[R]}}5 Q};O.deepextend=3(Q,13){J(4 R x 13){4 1j=13[R];9(Q===1j)continue;9(1L 1j==="c"){Q[R]=M.callee(Q[R]||{},1j)}N{Q[R]=1j}}5 Q};O.wrapper=3(me,15){4 1M=3(){me.T(Z,M)};4 1N=3(){};1N.17=15.17;1M.17=new 1N;5 1M};B=(3(U){4 b={18:/18/.P(U)&&!/1O/.P(U),1O:/1O/.P(U),2h:/webkit/.P(U)&&!/1P/.P(U),2i:/2i/.P(U),1P:/1P/.P(U)};4 1w="";J(4 i x b){9(b[i]){1w="2h"==i?"1k":i;1Q}}b.1k=1w&&1R("(?:"+1w+")[\\\\/: ]([\\\\d.]+)").P(U)?1R.$1:"0";b.ie=b.18;b.2j=b.18&&1T(b.1k,10)==6;b.ie7=b.18&&1T(b.1k,10)==7;b.2k=b.18&&1T(b.1k,10)==8;5 b})(1U.navigator.userAgent.toLowerCase());A=3(){4 p={isArray:3(2l){5 Object.17.toString.19(2l)==="[c 1V]"},1x:3(K,W,l){9(K.1x){5 1y(l)?K.1x(W):K.1x(W,l)}N{4 V=K.1l;l=1y(l)?0:l<0?1z.2m(l)+V:1z.2n(l);J(;l=V-1?V-1:l<0?1z.2m(l)+V:1z.2n(l);J(;l>-1;l--){9(K[l]===W)5 l}5-1}}};3 11(c,u){9(1K===c.1l){J(4 o x c){9(y===u(c[o],o,c))1Q}}N{J(4 i=0,V=c.1l;i<v;i++){9(i x="" c){9(y="==u(c[i],i,c))1Q}}}};11({2o:3(c,u,t){11(c,3(){u.T(t,M)})},map:3(c,u,t){4" p="[];11(c,3(){p.2p(u.T(t,M))});5" p},1b:3(c,u,t){4="" p},every:3(c,u,t){4="" y}});5="" p},some:3(c,u,t){4="" p}},3(2r,o){p[o]="3(c,u,t){9(c[o]){5" c[o](u,t)}n{5="" 2r(c,u,t)}}});5="" p}();f="(3(){4" 1a="1V.17.1a;5{bind:3(1C,t){4" 1b="1a.19(M,2);5" 3(){5="" 1c.t(t,1b.2s(1a.19(m)))}},bindaseventlistener:3(1c,t){4="" 3(j){5="" 1c.t(t,[e.1m(j)].2s(1b))}}}})();d="{1D:3(r){4" 1c="r?r.2t:G;5" 1c.2u.2v||1c.1d.2v},1e:3(r){4="" 1c.2u.2w||1c.1d.2w},1w:g.1n?3(a,b){5!!(a.2x(b)&16)}:3(a,b){5="" a!="b&&a.1W(b)},H:3(r){4" q="0,L=0,X=0,Y=0;9(!r.2y||B.2k){4" n="r;while(n){q+=n.offsetLeft,L+=n.offsetTop;n=n.offsetParent};X=q+r.1X;Y=L+r.1Y}N{4" h="r.2y();q=X=D.1E(r);L=Y=D.1D(r);q+=H.q;X+=H.X;L+=H.L;Y+=H.Y};5{&quot;q&quot;:q,&quot;L&quot;:L,&quot;X&quot;:X,&quot;Y&quot;:Y}},clientRect:3(r){4" h},1e:g.1n?3(g){5="" g.1n.2z(g,1o)}:3(g){5="" g.1f},getstyle:g.1n?3(g,o){4="" k="G.1n.2z(g,1o);5" o="" k?k[o]:k.getpropertyvalue(o)}:3(g,o){4="" 12="parseFloat(1R.$1);5" 12?12="" 2a:0}5="" 1}9(o="=&quot;2B&quot;){o=&quot;2C&quot;}4" p},23:3(1p,k,1f){9(!1p.1l){1p="[1p]}9(1L" s="k;k={};k[s]=1f}A.2o(1p,3(g){J(4" k){4="" 1f="k[o];9(o==&quot;12&quot;&&B.ie){g.k.1B=(g.1F&&g.1F.1B||&quot;&quot;).2F(/21\\([^)]*\\)/,&quot;&quot;)+&quot;" 21(12="+(1f*2A|0)+" )"}n="" 9(o="=&quot;2B&quot;){g.k[B.ie?&quot;2C&quot;:&quot;cssFloat&quot;]=1f}N{g.k[S.22(o)]=1f}}})},getSize:3(g){4" 1q="g.1X,1r=g.1Y;9(!1q&&!1r){4" 24="!D.1W(G.1d,g),15;9(24){15=g.parentNode;G.1d.insertBefore(g,G.1d.childNodes[0])}4" 1g,1h,v="1,28=3(h,f,m){9(!m.$$v)m.$$v=v++;9(!h.C)h.C={};4" i="h.C[f];9(!I){I=h.C[f]={};9(h[&quot;on&quot;+f]){I[0]=h[&quot;on&quot;+f]}}};9(1U.2a){4" 1s="{&quot;mouseenter&quot;:&quot;2J&quot;,&quot;mouseleave&quot;:&quot;2K&quot;};1g=3(h,f,m){9(f" 1s){28(h,f,m);4="" 2l="h.C[f][m.$$v]=3(j){4" 1h="j.1t;9(!1H||(h!=1H&&!(h.2x(1H)&16))){m.19(Z,j)}};h.2a(1s[f],2L,y)}N{h.2a(f,m,y)}};1h=3(h,f,m){9(f" 1s){9(h.c&&h.c[f]){h.2m(1s[f],h.c[f][m.$$v],y);2b="" h.c[f][m.$$v]}}n{h.2m(f,m,y)}}}n{1g="3(h,f,m){28(h,f,m);h.C[f][m.$$v]=m;h[&quot;on&quot;+f]=1I};1h=3(h,f,m){9(h.C&&h.C[f]){2b" h.c[f][m.$$v]}};3="" 1i(){4="" 1j="14,j=1m();4" i){z.$$1i="I[i];9(Z.$$1I(j)===y){1J=y}}5" 1j}}3="" 1m(j){9(j)5="" j;j="1U.j;j.pageX=j.clientX+D.1E(j.2c);j.pageY=j.clientY+D.1D(j.2c);j.target=j.2c;j.2d=2d;j.2e=2e;4" 1t="{&quot;2K&quot;:j.toElement,&quot;2J&quot;:j.fromElement}[j.f];9(1t){j.1t=1t}5" j};3="" 2d(){z.cancelbubble="14};3" 2e(){z.1j="y};5{&quot;1g&quot;:1g,&quot;1h&quot;:1h,&quot;1m&quot;:1m}})();CE=(3(){4" v="1;5{1g:3(c,f,m){9(!m.$$$v)m.$$$v=v++;9(!c.w)c.w={};9(!c.w[f])c.w[f]={};c.w[f][m.$$$v]=m},1h:3(c,f,m){9(c.w&&c.w[f]){2b" c.w[f][m.$$$v]}},fireevent:3(c,f){9(!c.w)5;4="" i){i[i].t(c,1b)}},clearevent:3(c){9(!c.w)5;j(4="" f="" c.w){4="" i){i[i]="1o}c.w[f]=1o}c.w=1o}}})();S={22:3(s){5" s.2f(="" -([a-z])="" ig,3(all,2n){5="" 2n.touppercase()})}};9(b.2j){try{g.execcommand("backgroundimagecache",y,14)}catch(e){}};$$="O;$$B=B;$$A=A;$$F=F;$$D=D;$$E=E;$$CE=CE;$$S=S})();'," [],="" 174,="" '|||function|var|return||||if|||object|||type|elem|element||event|style|from|handler||name|ret|left|node||thisp|callback|guid|cusevents|in|false||||events||||document|rect|handlers|for|array|top|arguments|else||test|destination|property||apply|ua|len|elt|right|bottom|this||each|opacity|source|true|parent||prototype|msie|call|slice|args|doc|body|curstyle|value|addevent|removeevent||copy|version|length|fixevent|defaultview|null|elems|width|height|fix|relatedtarget||override|vmark|indexof|isnan|math|lastindexof|filter|fun|getscrolltop|getscrollleft|currentstyle|rtstyle|related|handleevent|returnvalue|undefined|typeof|ins|subclass|opera|chrome|break|regexp||parseint|window|array|contains|offsetwidth|offsetheight|sleft|stop|alpha|camelize|setstyle|repair|position|visibility|display|storage||addeventlistener|delete|srcelement|stoppropagation|preventdefault|string||safari|firefox|ie6|ie8|obj|ceil|floor|foreach|push|item|method|concat|ownerdocument|documentelement|scrolltop|scrollleft|comparedocumentposition|getboundingclientrect|getcomputedstyle|100|float|stylefloat||rsleft|replace|cssshow|9999px|cssback|mouver|mouseout|fixhandler|removeeventlistener|letter'.split('|'),="" 0,="" {}))
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<