javascript通过鼠标拖拽修改图片大小和位置
javascript实现图片的拖拽移动，给图片添加锚点，放到锚点上出现resize鼠标形状，按下鼠标拖拽更改图片大小，效果如下
源代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript通过鼠标拖拽修改图片大小和位置档</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.pointer{cursor: pointer;}
.on{box-shadow: 0 0 10px #111;cursor: move;}
.off{box-shadow: 0 0 0 0;cursor: pointer;}
#main div{position:absolute;width:200px;height:200px;}
#main .scale{background:transparent;width:100%;height:100%;}
#main img{width:100%;height:100%;}
#main font{position:absolute;background:#f00;width:5px;height:5px;}
#main font.nw{cursor:nw-resize;}
#main font.ne{cursor:ne-resize;}
#main font.e{cursor:e-resize;}
#main font.n{cursor:n-resize;}
#main font.top{top:0px;}
#main font.bottom{bottom:0px;}
#main font.left{left:0px;}
#main font.right{right:0px;}
#main font.tophf{top:50%;}
#main font.lefthf{left:50%;}
</style>
</head>
<body>
<div style="width: 100%; height: 100%; margin: 0 auto;" id="main">
<div class="item">
<div class="scale"><font class="top left nw"></font><font class="top lefthf n"></font><font class="top right ne"></font><font class="tophf right e"></font><font class="bottom right nw"></font><font class="bottom lefthf n"></font><font class="bottom left ne"></font><font class="tophf left e"></font></div>
<img src="/eg/aaa.png" /></div>
</div>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById('main').getElementsByTagName('div'),item=[];
for(var i=0,j=div.length;i<j;i++)if(div[i].className=='item'){item[item.length]=div[i];InitEvent(div[i]);}
function InitEvent(obj) {
obj.onmousedown = function (e) {//鼠标按下事件
for(var i=0,j=item.length;i<j;i++)item[i].style.zIndex=item[i]==obj?100:0;
var oe = e || window.event;
var target=oe.srcElement||oe.target,resize=false;
if(target.tagName=='FONT')resize=target.className;
var $this=this;
var startX = oe.clientX,startY = oe.clientY;
var offsetLeft=$this.offsetLeft,offsetTop=$this.offsetTop;
var oW=$this.offsetWidth,oH=$this.offsetHeight;
var minW=50,minH=50;
obj.className = "on"; //css3阴影样式添加
document.onmousemove = function (e) {//鼠标移动事件
var oe = e || window.event;
if(resize){
var x=oe.clientX-startX,y=oe.clientY-startY,w=oW+x,h=oH+y,top=false,left=false;
if(resize.indexOf('top ')!=-1){top=offsetTop+y+'px';h=oH-y;}
if(resize.indexOf(' left ')!=-1){left=offsetLeft+x+'px';w=oW-x;}
if(w<minW||h<minH)return;
if(top!==false)$this.style.top=top;
if(left!==false)$this.style.left=left;
if(resize.indexOf(' lefthf ')==-1)$this.style.width=w+'px';
if(resize.indexOf('tophf ')==-1)$this.style.height=h+'px';
}
else{
$this.style.left =offsetLeft+ oe.clientX - startX + "px";
$this.style.top = offsetTop+oe.clientY - startY + "px";
$this.className = 'pointer';
}
}
document.onmouseup = function () {//鼠标松开事件
document.onmousemove = null;
document.onmouseup = null;
obj.className = "off"; //css3阴影样式去除
if ($this.releaseCapture) {//debug释放鼠标捕获
$this.releaseCapture();
}
}
if ($this.setCapture) {//debug设置鼠标捕获
$this.setCapture();
}
return false;
}
}
};
</script>
</body></html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：javascript通过鼠标拖拽修改图片大小和位置