这篇文章主要为大家介绍了图片旋转、鼠标滚轮缩放、镜像、切换图片 js 代码具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例为大家展示了图片旋转、鼠标滚轮缩放、镜像、切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下
具体代码:
- <!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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0220/267519.html