前端之家收集整理的这篇文章主要介绍了
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例为大家展示了图片旋转、鼠标滚轮缩放、镜像、切换图片多重效果，提供了详细的代码，分享给大家供大家参考，具体内容如下
具体代码：
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="zh-cn">
<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>旋转,鼠标滚轮缩放,镜像,切换<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>
<div id="idContainer">
_14@
(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);
}
})()
