ImageTrans.js - js图片缩放、旋转、翻转插件_图像特效_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2018-02-06 11:21:08 去下载去预览

特效介绍

ImageTrans.js是一款可以对图像进行拖拽旋转、滚动滚轮缩放、对图像进行水平翻转和垂直翻转的图片查看器插件，基于CJL.0.1.min.js。小巧玲珑，兼容性好。非常适合做转盘等效果。

使用方法

1、放置图片的容器（图片加载进去，带图片加载动画，拖拽这个容器进行图像的旋转）：

`1`	`<div` `id="idContainer"></div>`

2、引入CJL.0.1.min.js和ImageTrans.js

`1`	`<script type="text/javascript"` `src="http://www.5imoban.net/download/CJL/CJL.0.1.min.js"></script>`

`2`	`<script type="text/javascript"` `src="ImageTrans.js"></script>`

3、js调用：

1var container = $$("idContainer"), src = "1.jpg",
2options = {
3 //加载动画开始
4 onPreLoad: function(){ container.style.backgroundImage = "url('loading.gif')"; },
5 //移除加载动画
6 onLoad: function(){ container.style.backgroundImage = ""; }
7},
8it = new ImageTrans( container, options );
9it.load(src);

4、其他功能：

01//垂直翻转
02$$("idVertical").onclick = function(){
03 it.vertical();
04}
05//水平翻转
06$$("idHorizontal").onclick = function(){
07 it.horizontal();
08}
09//左旋转
10$$("idLeft").onclick = function(){
11 it.left();
12}
13//右旋转
14$$("idRight").onclick = function(){
15 it.right();
16}
17//重置
18$$("idReset").onclick = function(){
19 it.reset();
20}
21//换图
22$$("idLoad").onclick = function(){
23 it.load( $$("idSrc").value );
24}