圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼
更新時間：2020年12月13日 14:55:34 作者：李斌
這篇文章主要為大家介紹了圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家展示了圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片多重效果，提供了詳細的代碼，分享給大家供大家參考，具體內(nèi)容如下
具體代碼：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>圖片旋轉(zhuǎn),鼠標(biāo)滾輪縮放,鏡像,切換圖片</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;">效果預(yù)覽</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; //變換區(qū)域?qū)挾?
this._clientHeight = container.clientHeight; //變換區(qū)域高度
this._img = new Image(); //圖片對象
this._style = {}; //備份樣式
this._x = this._y = 1; //水平/垂直變換參數(shù)
this._radian = 0; //旋轉(zhuǎn)變換參數(shù)
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");
},
//設(shè)置默認屬性
_setOptions: function(options) {
this.options = { //默認值
mode: "css3|filter|canvas",
zoom: .1, //縮放比率
onPreLoad: function() {}, //圖片加載前執(zhí)行
onLoad: function() {}, //圖片加載后執(zhí)行
onError: function(err) {} //出錯時執(zhí)行
};
return $$.extend(this.options, options || {});
},
//模式設(shè)置
_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); //初始化執(zhí)行程序
mode.load && (this._load = mode.load); //加載圖片執(zhí)行程序
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); //恢復(fù)樣式
this._container = this._img = this._img.onload = this._img.onerror = this._LOAD = null;
}
}
};
//變換模式
ImageTrans.modes = function() {
var css3Transform; //ccs3變換樣式
//初始化圖片對象函數(shù)
function initImg(img, container) {
$$D.setStyle(img, {
position: "absolute",
border: 0,
padding: 0,
margin: 0,
width: "auto",
height: "auto", //重置樣式
visibility: "hidden" //加載前隱藏
});
container.appendChild(img);
}
//獲取變換參數(shù)函數(shù)
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設(shè)置
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);
//設(shè)置變形樣式
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: { //濾鏡設(shè)置
support: function() {
return "filters" in document.createElement("div");
}(),
init: function() {
initImg(this._img, this._container);
//設(shè)置濾鏡
this._img.style.filter = "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand')";
},
load: function() {
this._img.onload = null; //防止ie重復(fù)加載gif的bug
this._img.style.visibility = "visible";
},
show: function() {
var img = this._img;
//設(shè)置濾鏡
$$.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設(shè)置
support: function() {
return "getContext" in document.createElement('canvas');
}(),
init: function() {
var canvas = this._canvas = document.createElement('canvas'),
context = this._context = canvas.getContext('2d');
//樣式設(shè)置
$$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); //清空內(nèi)容
context.translate(clientWidth / 2, clientHeight / 2); //中心坐標(biāo)
context.rotate(this._radian); //旋轉(zhuǎn)
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 = {
//垂直翻轉(zhuǎn)
vertical: function() {
this._radian = Math.PI - this._radian;
this._y *= -1;
},
//水平翻轉(zhuǎn)
horizontal: function() {
this._radian = Math.PI - this._radian;
this._x *= -1;
},
//根據(jù)弧度旋轉(zhuǎn)
rotate: function(radian) {
this._radian = radian;
},
//向左轉(zhuǎn)90度
left: function() {
this._radian -= Math.PI / 2;
},
//向右轉(zhuǎn)90度
right: function() {
this._radian += Math.PI / 2;
},
//根據(jù)角度旋轉(zhuǎn)
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));
}
};
//拖動旋轉(zhuǎn)
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;
}
};
//開始函數(shù)
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();
}
};
//拖動函數(shù)
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();
};
//停止函數(shù)
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;
}
};
//縮放函數(shù)
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="向左旋轉(zhuǎn)" type="button" />
<input id="idRight" value="向右旋轉(zhuǎn)" type="button" />
<input id="idVertical" value="垂直翻轉(zhuǎn)" type="button" />
<input id="idHorizontal" value="水平翻轉(zhuǎn)" 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);
//垂直翻轉(zhuǎn)
$$("idVertical").onclick = function() {
it.vertical();
}
//水平翻轉(zhuǎn)
$$("idHorizontal").onclick = function() {
it.horizontal();
}
//左旋轉(zhuǎn)
$$("idLeft").onclick = function() {
it.left();
}
//右旋轉(zhuǎn)
$$("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代碼實現(xiàn)圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片等效果的代碼，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
微信小程序?qū)崿F(xiàn)紅包功能（后端PHP實現(xiàn)邏輯）
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)紅包功能，以及后端PHP實現(xiàn)邏輯，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
js變量值傳到php過程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過程詳解 將php解析成數(shù)據(jù)，傳參數(shù)去后臺，用ajax，或者原生js方式拼接url。明白原理，洞悉系統(tǒng)是先解析php，再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06
JavaScript對JSON數(shù)組簡單排序操作示例
這篇文章主要介紹了JavaScript對JSON數(shù)組簡單排序操作,結(jié)合實例形式分析了javascript使用sort()方法針對json數(shù)組元素排序的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-01-01
ES6中的class是如何實現(xiàn)的(附Babel編譯的ES5代碼詳解)
這篇文章主要介紹了ES6中的class是如何實現(xiàn)的？(附Babel編譯的ES5代碼詳解)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
JavaScript調(diào)用傳遞變量參數(shù)的相關(guān)問題及解決辦法
本文給大家介紹javascript調(diào)用傳遞變量參數(shù)的相關(guān)問題及解決辦法，涉及到j(luò)s調(diào)用傳遞參數(shù)相關(guān)知識，對js調(diào)用傳遞參數(shù)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章介紹了非常好用的JsonToString簡單實例，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了JS中作用域以及變量范圍,需要的朋友可以參考下2020-07-07
getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法
本文是對getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法。進行了分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
讓你的博文自動帶上縮址的實現(xiàn)代碼，方便發(fā)到微博客上
添加以下代碼到你的博客中: (呵呵，抄襲至lulu Studio http://s8.hk/0itw)2010-12-12
每個微信小程序都可以有自己的本地緩存，本篇文章主要介紹了微信小程序-詳解數(shù)據(jù)緩存，可以通過函數(shù)可以對本地緩存進行設(shè)置、獲取和清理，有興趣的可以了解一下。2016-11-11