特效介绍
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 ); }