首页 > 特效插件 > 图像特效 >  ImageTrans.js - js图片缩放、旋转、翻转插件正文

ImageTrans.js - js图片缩放、旋转、翻转插件

特效介绍
ImageTrans.js - js图片缩放、旋转、翻转插件

    ImageTrans.js是一款可以对图像进行拖拽旋转、滚动滚轮缩放、对图像进行水平翻转和垂直翻转的图片查看器插件,基于CJL.0.1.min.js。小巧玲珑,兼容性好。非常适合做转盘等效果。
使用方法
1、放置图片的容器(图片加载进去,带图片加载动画,拖拽这个容器进行图像的旋转):
<div id="idContainer"></div>
2、引入CJL.0.1.min.js和ImageTrans.js
<script type="text/javascript" src="http://www.5imoban.net/download/CJL/CJL.0.1.min.js"></script>
<script type="text/javascript" src="ImageTrans.js"></script>
3、js调用:
var container = $$("idContainer"), src = "1.jpg",
options = {
 //加载动画开始
 onPreLoad: function(){ container.style.backgroundImage = "url('loading.gif')"; },
 //移除加载动画
 onLoad: function(){ container.style.backgroundImage = ""; }
},
it = new ImageTrans( container, options );
it.load(src);
4、其他功能:
//垂直翻转
$$("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 );
}