<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title>
<meta charset="utf-8" />
<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;
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: {
support: function() {
var style = document.createElement("div").style;
return $$A.some(
["transform", "MozTransform"