js范围内拖动、缩放

Html

Css

 #box {
	width:100px;
	height:100px;
	background-color:aquamarine;
	position:absolute;
}
#father {
	width:600px;
	height:500px;
	background-color:rgb(226,117,184);
	position:relative;
}
img {
	width:100%;
	height:100%;
	cursor:move;
}
#scale {
	width:10px;
	height:10px;
	overflow:hidden;
	cursor:se-resize;
	position:absolute;
	right:0;
	bottom:0;
	background-color:rgb(122,191,238);
}

// box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标
 var fa = document.getElementById('father');
 var box = document.getElementById("box");
 var scale = document.getElementById("scale");
 // 图片移动效果
 box.onmousedown = function(ev) {
     var oEvent = ev;
     // 浏览器有一些图片的默认事件,这里要阻止
     oEvent.preventDefault();
     var disX = oEvent.clientX - box.offsetLeft;
     var disY = oEvent.clientY - box.offsetTop;
     fa.onmousemove = function(ev) {
         oEvent = ev;
         oEvent.preventDefault();
         var x = oEvent.clientX - disX;
         var y = oEvent.clientY - disY;

// 图形移动的边界判断
         x = x <= 0 ? 0 : x;
         x = x >= fa.offsetWidth - box.offsetWidth ? fa.offsetWidth - box.offsetWidth : x;
         y = y <= 0 ? 0 : y;
         y = y >= fa.offsetHeight - box.offsetHeight ? fa.offsetHeight - box.offsetHeight : y;
         box.style.left = x + 'px';
         box.style.top = y + 'px';
     }
     // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
     fa.onmouseleave = function() {
         fa.onmousemove = null;
         fa.onmouseup = null;
     }
     // 鼠标弹起后停止移动
     fa.onmouseup = function() {
         fa.onmousemove = null;
         fa.onmouseup = null;
     }
 }
 // 图片缩放效果
 scale.onmousedown = function(e) {
     // 阻止冒泡,避免缩放时触发移动事件
     e.stopPropagation();
     e.preventDefault();
     var pos = {
         'w': box.offsetWidth,
         'h': box.offsetHeight,
         'x': e.clientX,
         'y': e.clientY
     };
     fa.onmousemove = function(ev) {
         ev.preventDefault();
         // 设置图片的最小缩放为30*30
         var w = Math.max(30, ev.clientX - pos.x + pos.w)
         var h = Math.max(30, ev.clientY - pos.y + pos.h)
         // console.log(w,h)

// 设置图片的最大宽高
         w = w >= fa.offsetWidth - box.offsetLeft ? fa.offsetWidth - box.offsetLeft : w
         h = h >= fa.offsetHeight - box.offsetTop ? fa.offsetHeight - box.offsetTop : h
         box.style.width = w + 'px';
         box.style.height = h + 'px';
         // console.log(box.offsetWidth,box.offsetHeight)
     }
     fa.onmouseleave = function() {
         fa.onmousemove = null;
         fa.onmouseup = null;
     }
     fa.onmouseup = function() {
         fa.onmousemove = null;
         fa.onmouseup = null;
     }
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js范围内拖动、缩放



代码描述：js范围内拖动、缩放

//box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

鑫浪・冯恒魁

相关代码

js范围内拖动、缩放

最新