30、调整图片大小可以用鼠标拖动图片四周任一控制点，但只有拖动______控制点，才能使图片等比例缩放。

发布网友 发布时间：2022-04-24 23:26

我来回答

共5个回答

热心网友 时间：2022-04-25 00:55

js:

<script type="text/javascript">  

var img=document.getElementById('imgsrc');  

var span=10;  

var isDrag=null;  

var isIE=!!document.all;  

var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;  

var percent=img.offsetHeight/img.offsetWidth;  

function mouseMove(e){  

e=e||event;  

var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img.offsetWidth,imgH=img.offsetHeight;  

if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img.className='cnwr';  

else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img.className='cner';  

else if(x<=span||x>=imgW-span)img.className='chr';  

else if(y<=span||y>=imgH-span)img.className='cvr';  

else img.className='cdft';  

}  

function mouseDown(e){  

e=e||event;  

ex=e.clientX;//保存当前鼠标X轴的坐标  

ey=e.clientY;//保存当前鼠标y轴的坐标  

ox=parseInt(img.style.left);  

oy=parseFloat(img.style.top);  

if(img.className=='cdft'){  

isDrag=true;  

img.className='cmove';  

}  

else{  

isDrag=false;  

oh=img.offsetHeight;//获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  

ow=img.offsetWidth;  

var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY;//相对容器的水平坐标,相对容器的垂直坐标  

chrPosX=x<=span;  

chrPosY=y<=span;  

if(e.ctrlKey){//事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住  

ow=oh/percent;//根据比例计算出宽度  

img.style.width=ow;//更新图片宽度  

}  

}  

if(isIE)img.setCapture();    

document.onmousemove=mouseDownAndMove;  

img.onmousemove=null;  

return false;  

}  

function mouseDownAndMove(e){  

e=e||event;  

if(isDrag===true){  

img.style.left=ox+e.clientX-ex+'px';  

img.style.top=oy+e.clientY-ey+'px';  

}  

else if(isDrag===false){  

var x=e.clientX-ex,y=e.clientY-ey;  

switch(img.className){  

case 'chr':  

x=chrPosX?-x:x;  

y=e.ctrlKey?percent*x+oh:oh;  

img.style.width=ow+x+'px';  

img.style.height=y+'px';  

if(chrPosX)img.style.left=ox-x+'px';  

break;  

case 'cvr':  

y=chrPosY?-y:y;  

x=e.ctrlKey?y/percent+ow:ow;  

img.style.width=x+'px';  

img.style.height=oh+y+'px';  

if(chrPosY)img.style.top=oy-y+'px';  

break;  

case 'cnwr':  

case 'cner':  

x=chrPosX?-x:x;  

if(e.ctrlKey){//按宽等比  

y=e.ctrlKey?percent*x+oh:oh;  

img.style.width=ow+x+'px';  

img.style.height=y+'px';  

if(chrPosX)img.style.left=ox-x+'px';  

}  

else{            

y=chrPosY?-y:y;  

img.style.width=ow+x+'px';  

img.style.height=oh+y+'px';  

if(chrPosX)img.style.left=ox-x+'px';  

if(chrPosY)img.style.top=oy-y+'px';  

}  

break;  

}  

}  

}  

img.onmousemove=mouseMove;  

img.onmousedown=mouseDown;  

document.onmouseup=function(){  

if(typeof isDrag=="boolean"){  

if(isIE)img.releaseCapture();//函数的作用就是将后续的mouse事件都发送给这个对象  

}  

isDrag=null;  

img.className='cdft';  

img.onmousemove=mouseMove;  

document.onmousemove=null;  

}  

</script>

原文链接：网页链接

热心网友 时间：2022-04-25 02:13

热心网友 时间：2022-04-25 03:48

热心网友 时间：2022-04-25 05:39

热心网友 时间：2022-04-25 07:47