JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
本文实例讲述了JS实现放大、缩小及拖拽图片的方法。分享给大家供大家参考，具体如下：
vardivId;
varv_left;
varv_top;
window.onload=function(){
divId=document.getElementById("block1");
varheight1=images1.height;//图片的高度
varwidth1=images1.width;//图片的宽度
v_left=(document.body.clientWidth-width1)/2;
v_top=(document.body.clientHeight-height1)/2;
divId.style.left=v_left;
divId.style.top=v_top;
}
drag=0;
move=0;
//拖拽对象
varie=document.all;
varnn6=document.getElementById&&!document.all;
varisdrag=false;
vary,x;
varoDragObj;
functionmoveMouse(e){
if(isdrag){
oDragObj.style.top=(nn6?nTY+e.clientY-y:nTY+event.clientY-y)+"px";
oDragObj.style.left=(nn6?nTX+e.clientX-x:nTX+event.clientX-x)+"px";
returnfalse;
}
}
//拖拽方法
functioninitDrag(e){
varoDragHandle=nn6?e.target:event.srcElement;
vartopElement="HTML";
while(oDragHandle.tagName!=topElement&&oDragHandle.className!="dragAble"){
oDragHandle=nn6?oDragHandle.parentNode:oDragHandle.parentElement;
}
if(oDragHandle.className=="dragAble"){
isdrag=true;
oDragObj=oDragHandle;
nTY=parseInt(oDragObj.style.top+0);
y=nn6?e.clientY:event.clientY;
nTX=parseInt(oDragObj.style.left+0);
x=nn6?e.clientX:event.clientX;
document.onmousemove=moveMouse;
//document.onmouseup=MUp;//事件会在鼠标按键被松开时发生
returnfalse;
}
}
document.onmousedown=initDrag;
document.onmouseup=newFunction("isdrag=false");
//上下左右移动
functionclickMove(s){
if(s=="up"){
dragObj.style.top=parseInt(dragObj.style.top)+100;
}else{
if(s=="down"){
dragObj.style.top=parseInt(dragObj.style.top)-100;
}else{
if(s=="left"){
dragObj.style.left=parseInt(dragObj.style.left)+100;
}else{
if(s=="right"){
dragObj.style.left=parseInt(dragObj.style.left)-100;
}
}
}
}
}
//缩小倍数
functionsmallit(){
//将图片缩小，失去热点
height1=images1.height;
width1=images1.width;
images1.height=height1/1.1;
images1.width=width1/1.1;
}
//放大倍数
functionbigit(){
/*//将图片放大，不失热点
varzoom=parseInt(images1.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0){
images1.style.zoom=(zoom+10)+"%";
}*/
//将图片放大，失去热点
height1=images1.height;
width1=images1.width;
images1.height=height1*1.1;
images1.width=width1*1.1;
}
//还原
functionrealsize(){
images1.style.zoom=100+"%";
images1.height=images2.height;
images1.width=images2.width;
divId.style.left=v_left;
divId.style.top=v_top;
}
functionfeatsize(){
varwidth1=images2.width;
varheight1=images2.height;
varwidth2=360;
varheight2=200;
varh=height1/height2;
varw=width1/width2;
if(height1<height2&&width1<width2){
images1.height=height1;
images1.width=width1;
}else{
if(h>w){
images1.height=height2;
images1.width=width1*height2/height1;
}else{
images1.width=width2;
images1.height=height1*width2/width1;
}
}
block1.style.left=0;
block1.style.top=0;
}
//鼠标滚轮放大缩小
functionbbimg(o){
/*vareleLeft;
vareleTop;
if(document.documentElement){
eleLeft=document.documentElement.scrollLeft;
eleTop=document.documentElement.scrollTop;
}
else{
eleLeft=document.body.scrollLeft;
eleTop=document.body.scrollTop;
}
v_left+=eleLeft;
v_top+=eleTop;
//divId.style.left=v_left;
//divId.style.top=v_top;
alert(document.documentElement.scrollTop+"----xxx"+document.body.scrollTop+window.pageyoffset);*/
varzoom=parseInt(o.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0){
o.style.zoom=zoom+"%";
}
returnfalse;
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。