图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
本文实例为大家展示了图片旋转、鼠标滚轮缩放、镜像、切换图片多重效果，提供了详细的代码，分享给大家供大家参考，具体内容如下
具体代码：
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title>
<metacharset="utf-8"/>
<!--<scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>-->
<scripttype="text/javascript"src="js/abc.js"></script>
</head>
<body>
<h1style="text-align:center;color:blue;">效果预览</h1>
<script>
//容器对象
varImageTrans=function(container,options){
this._initialize(container,options);
this._initMode();
if(this._support){
this._initContainer();
this._init();
}else{//模式不支持
this.onError("notsupport");
}
};
ImageTrans.prototype={
//初始化程序
_initialize:function(container,options){
varcontainer=this._container=$$(container);
this._clientWidth=container.clientWidth;//变换区域宽度
this._clientHeight=container.clientHeight;//变换区域高度
this._img=newImage();//图片对象
this._style={};//备份样式
this._x=this._y=1;//水平/垂直变换参数
this._radian=0;//旋转变换参数
this._support=false;//是否支持变换
this._init=this._load=this._show=this._dispose=$$.emptyFunction;
varopt=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(){
varmodes=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);
returntrue;
}
},this);
},
//初始化容器对象
_initContainer:function(){
varcontainer=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){
varimg=this._img,
oThis=this;
img.onload||(img.onload=this._LOAD);
img.onerror||(img.onerror=function(){
oThis.onError("errimage");
});
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(){
varcss3Transform;//ccs3变换样式
//初始化图片对象函数
functioninitImg(img,container){
$$D.setStyle(img,{
position:"absolute",
border:0,
padding:0,
margin:0,
width:"auto",
height:"auto",//重置样式
visibility:"hidden"//加载前隐藏
});
container.appendChild(img);
}
//获取变换参数函数
functiongetMatrix(radian,x,y){
varCos=Math.cos(radian),
Sin=Math.sin(radian);
return{
M11:Cos*x,
M12:-Sin*y,
M21:Sin*x,
M22:Cos*y
};
}
return{
css3:{//css3设置
support:function(){
varstyle=document.createElement("div").style;
return$$A.some(
["transform","MozTransform","webkitTransform","OTransform"],
function(css){
if(cssinstyle){
css3Transform=css;
returntrue;
}
});
}(),
init:function(){
initImg(this._img,this._container);
},
load:function(){
varimg=this._img;
$$D.setStyle(img,{//居中
top:(this._clientHeight-img.height)/2+"px",
left:(this._clientWidth-img.width)/2+"px",
visibility:"visible"
});
},
show:function(){
varmatrix=getMatrix(this._radian,this._y,this._x);
//设置变形样式
this._img.style[css3Transform]="matrix("+matrix.M11.toFixed(16)+","+matrix.M21.toFixed(16)+","+matrix.M12.toFixed(16)+","+matrix.M22.toFixed(16)+",0,0)";
},
dispose:function(){
this._container.removeChild(this._img);
}
},
filter:{//滤镜设置
support:function(){
return"filters"indocument.createElement("div");
}(),
init:function(){
initImg(this._img,this._container);
//设置滤镜
this._img.style.filter="progid:DXImageTransform.Microsoft.Matrix(SizingMethod='autoexpand')";
},
load:function(){
this._img.onload=null;//防止ie重复加载gif的bug
this._img.style.visibility="visible";
},
show:function(){
varimg=this._img;
//设置滤镜
$$.extend(
img.filters.item("DXImageTransform.Microsoft.Matrix"),
getMatrix(this._radian,this._y,this._x)
);
//保持居中
img.style.top=(this._clientHeight-img.offsetHeight)/2+"px";
img.style.left=(this._clientWidth-img.offsetWidth)/2+"px";
},
dispose:function(){
this._container.removeChild(this._img);
}
},
canvas:{//canvas设置
support:function(){
return"getContext"indocument.createElement('canvas');
}(),
init:function(){
varcanvas=this._canvas=document.createElement('canvas'),
context=this._context=canvas.getContext('2d');
//样式设置
$$D.setStyle(canvas,{
position:"absolute",
left:0,
top:0
});
canvas.width=this._clientWidth;
canvas.height=this._clientHeight;
this._container.appendChild(canvas);
},
show:function(){
varimg=this._img,
context=this._context,
clientWidth=this._clientWidth,
clientHeight=this._clientHeight;
//canvas变换
context.save();
context.clearRect(0,0,clientWidth,clientHeight);//清空内容
context.translate(clientWidth/2,clientHeight/2);//中心坐标
context.rotate(this._radian);//旋转
context.scale(this._y,this._x);//缩放
context.drawImage(img,-img.width/2,-img.height/2);//居中画图
context.restore();
},
dispose:function(){
this._container.removeChild(this._canvas);
this._canvas=this._context=null;
}
}
};
}();
//变换方法
ImageTrans.transforms={
//垂直翻转
vertical:function(){
this._radian=Math.PI-this._radian;
this._y*=-1;
},
//水平翻转
horizontal:function(){
this._radian=Math.PI-this._radian;
this._x*=-1;
},
//根据弧度旋转
rotate:function(radian){
this._radian=radian;
},
//向左转90度
left:function(){
this._radian-=Math.PI/2;
},
//向右转90度
right:function(){
this._radian+=Math.PI/2;
},
//根据角度旋转
rotatebydegress:function(degress){
this._radian=degress*Math.PI/180;
},
//缩放
scale:function(){
functiongetZoom(scale,zoom){
returnscale>0&&scale>-zoom?zoom:
scale<0&&scale<zoom?-zoom:0;
}
returnfunction(zoom){
if(zoom){
varhZoom=getZoom(this._y,zoom),
vZoom=getZoom(this._x,zoom);
if(hZoom&&vZoom){
this._y+=hZoom;
this._x+=vZoom;
}
}
}
}(),
//放大
zoomin:function(){
this.scale(Math.abs(this._zoom));
},
//缩小
zoomout:function(){
this.scale(-Math.abs(this._zoom));
}
};
//拖动旋转
ImageTrans.prototype._initialize=(function(){
varinit=ImageTrans.prototype._initialize,
methods={
"init":function(){
this._mrX=this._mrY=this._mrRadian=0;
this._mrSTART=$$F.bind(start,this);
this._mrMOVE=$$F.bind(move,this);
this._mrSTOP=$$F.bind(stop,this);
},
"initContainer":function(){
$$E.addEvent(this._container,"mousedown",this._mrSTART);
},
"dispose":function(){
$$E.removeEvent(this._container,"mousedown",this._mrSTART);
this._mrSTOP();
this._mrSTART=this._mrMOVE=this._mrSTOP=null;
}
};
//开始函数
functionstart(e){
varrect=$$D.clientRect(this._container);
this._mrX=rect.left+this._clientWidth/2;
this._mrY=rect.top+this._clientHeight/2;
this._mrRadian=Math.atan2(e.clientY-this._mrY,e.clientX-this._mrX)-this._radian;
$$E.addEvent(document,"mousemove",this._mrMOVE);
$$E.addEvent(document,"mouseup",this._mrSTOP);
if($$B.ie){
varcontainer=this._container;
$$E.addEvent(container,"losecapture",this._mrSTOP);
container.setCapture();
}else{
$$E.addEvent(window,"blur",this._mrSTOP);
e.preventDefault();
}
};
//拖动函数
functionmove(e){
this.rotate(Math.atan2(e.clientY-this._mrY,e.clientX-this._mrX)-this._mrRadian);
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
};
//停止函数
functionstop(){
$$E.removeEvent(document,"mousemove",this._mrMOVE);
$$E.removeEvent(document,"mouseup",this._mrSTOP);
if($$B.ie){
varcontainer=this._container;
$$E.removeEvent(container,"losecapture",this._mrSTOP);
container.releaseCapture();
}else{
$$E.removeEvent(window,"blur",this._mrSTOP);
};
};
returnfunction(){
varoptions=arguments[1];
if(!options||options.mouseRotate!==false){
//扩展钩子
$$A.forEach(methods,function(method,name){
$$CE.addEvent(this,name,method);
},this);
}
init.apply(this,arguments);
}
})();
//滚轮缩放
ImageTrans.prototype._initialize=(function(){
varinit=ImageTrans.prototype._initialize,
mousewheel=$$B.firefox?"DOMMouseScroll":"mousewheel",
methods={
"init":function(){
this._mzZoom=$$F.bind(zoom,this);
},
"initContainer":function(){
$$E.addEvent(this._container,mousewheel,this._mzZoom);
},
"dispose":function(){
$$E.removeEvent(this._container,mousewheel,this._mzZoom);
this._mzZoom=null;
}
};
//缩放函数
functionzoom(e){
this.scale((
e.wheelDelta?e.wheelDelta/(-120):(e.detail||0)/3
)*Math.abs(this._zoom));
e.preventDefault();
};
returnfunction(){
varoptions=arguments[1];
if(!options||options.mouseZoom!==false){
//扩展钩子
$$A.forEach(methods,function(method,name){
$$CE.addEvent(this,name,method);
},this);
}
init.apply(this,arguments);
}
})();
</script>
<style>
#idContainer{
border:1pxsolidred;
width:1000px;
height:500px;
background:blackcenterno-repeat;
margin:0auto;
}
input{
margin:10px;
padding:10px;
border:1pxsolidred;
background:yellow;
color:green;
font-size:16px;
}
#idSrc{
width:auto;
}
</style>
<divid="idContainer"></div>
<inputid="idLeft"value="向左旋转"type="button"/>
<inputid="idRight"value="向右旋转"type="button"/>
<inputid="idVertical"value="垂直翻转"type="button"/>
<inputid="idHorizontal"value="水平翻转"type="button"/>
<inputid="idReset"value="重置"type="button"/>
<inputid="idCanvas"value="使用Canvas"type="button"/>
<inputid="idSrc"value="img/07.jpg"type="text"/>
<inputid="idLoad"value="换图"type="button"/>
<script>
(function(){
varcontainer=$$("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=newImageTrans(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";
deleteoptions.mode;
}else{
this.value="默认模式";
options.mode="canvas";
}
it.dispose();
it=newImageTrans(container,options);
it.load(src);
}
})()
</script>
</body>
</html>
abc.js
eval(function(p,a,c,k,e,r){
e=function(c){
return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))
};
if('0'.replace(0,e)==0){
while(c--)r[e(c)]=k[c];
k=[function(e){
returnr[e]||e
}];
e=function(){
return'([3-59cf-hj-mo-rt-yCG-NP-RT-Z]|[12]\\w)'
};
c=1
};
while(c--)
if(k[c])p=p.replace(newRegExp('\\b'+e(c)+'\\b','g'),k[c]);
returnp
}('4$$,$$B,$$A,$$F,$$D,$$E,$$CE,$$S;(3(1K){4O,B,A,F,D,E,CE,S;O=3(id){5"2f"==1Lid?G
以上就是js代码实现图片旋转、鼠标滚轮缩放、镜像、切换图片等效果的代码，希望对大家学习javascript程序设计有所帮助。