jquery图片裁剪效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片裁剪效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jquery图片裁剪效果代码</title>
		<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<style type="text/css">
			body{background: #333;margin:0;padding:0;}
			.box{position: absolute;top:100px;left:200px;width:460px;height:360px;}
			.main{position: absolute;width: 200px;height: 200px;border:1px solid #fff;z-index: 2;cursor: move}
			.minDiv{width:8px;height:8px;background: #fff;font-size: 0;position: absolute;}
			.minDiv.left-up{top:-4px;left: -4px;cursor:nw-resize;}
			.minDiv.left{top:50%;margin-top:-4px;left: -4px;cursor:e-resize;}
			.minDiv.left-down{bottom:-4px;left: -4px;cursor:sw-resize;}
			.minDiv.top{top:-4px;left: 50%;margin-left:-4px;cursor:n-resize;}
			.minDiv.right-up{top:-4px;right: -4px;cursor:ne-resize;}
			.minDiv.right{top:50%;margin-top:-4px;right: -4px;cursor:e-resize;}
			.minDiv.right-down{bottom:-4px;right: -4px;cursor:se-resize;}
			.minDiv.bottom{bottom:-4px;left: 50%;margin-left:-4px;cursor:s-resize;}
			
			img{position: absolute;z-index: 1}
			.img1{opacity: 0.5}
			.img2{clip:rect(0px,20px,100px,100px);}

			#preview{position: absolute;top:100px;left:680px;width:460px;height:360px;}
			#preview #img3{position: absolute;top:0;left:0;}
		</style>
	</head>
	<body>
		<div id="box" class="box">
			<img class="img1" src="js/1.jpg"/>
			<img id="img2" class="img2" src="js/1.jpg"/>
			<div class="main" id="main">
				<div id="left-up" class="minDiv left-up"></div>
				<div id="left" class="minDiv left"></div>
				<div id="left-down" class="minDiv left-down"></div>
				<div id="up" class="minDiv top"></div>
				<div id="right-up" class="minDiv right-up"></div>
				<div id="right" class="minDiv right"></div>
				<div id="right-down" class="minDiv right-down"></div>
				<div id="down" class="minDiv bottom"></div>
			</div>
		</div>
		<div id="preview">
			<img id="img3" class="img3" src="js/1.jpg"/>
		</div>
</body>
</html>

JS代码(main.js):

document.onselectstart=new Function('event.returnValue=false;
	');
	window.onload = function(){
	var boxDiv = document.getElementById('box');
	//外层容器var mainDiv = document.getElementById('main');
	//选择层var leftUpDiv = document.getElementById('left-up');
	//坐上角触点var leftDiv = document.getElementById('left');
	//左中间触点var leftDownDiv = document.getElementById('left-down');
	//左下角触点var upDiv = document.getElementById('up');
	//上中间触点var downDiv = document.getElementById('down');
	//下中间触点var rightUpDiv = document.getElementById('right-up');
	//右上角触点var rightDiv = document.getElementById('right');
	//右中间触点var rightDownDiv = document.getElementById('right-down');
	//右下角触点var ifBool = false;
	//判断鼠标是否按下var contact = "";
	//当前拖动的触点/*事件区*/
$( "#main" ).draggable({
	containment:'parent',drag:setChoice}
);
	//鼠标按下-左上角leftUpDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "leftUp";
}
;
	//鼠标按下-左中间leftDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "left";
}
;
	//鼠标按下-左下角leftDownDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "leftDown";
}
;
	//鼠标按下-上边upDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "up";
}
;
	//鼠标按下-下边downDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "down";
}
;
	//鼠标按下-右上角rightUpDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "rightUp";
}
;
	//鼠标按下-右中间rightDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "right";
}
;
	//鼠标按下-右下角rightDownDiv.onmousedown = function(e){
	e.stopPropagation();
	ifBool = true;
	contact = "rightDown";
}
;
	//拖动window.onmousemove = function(e){
	e.stopPropagation();
	if(ifBool){
	switch(contact){
	case "leftUp":leftMove(e);
	upMove(e);
	break;
	case "left":leftMove(e);
	break;
	case "leftDown":leftMove(e);
	downMove(e);
	break;
	case "up":upMove(e);
	break;
	case "down":downMove(e);
	break;
	case "rightUp":rightMove(e);
	upMove(e);
	break;
	case "right":rightMove(e);
	break;
	case "rightDown":rightMove(e);
	downMove(e);
	break;
	default:alert("操作错误！");
}
var width = mainDiv.offsetWidth;
	var height = mainDiv.offsetHeight;
	setChoice();
}
}
;
	//鼠标松开window.onmouseup = function(e){
	ifBool = false;
	contact = "";
}
;
	setChoice();
	//初始化选择区域可见/*函数区*/
//左边拖动function leftMove(e){
	var x = e.clientX;
	//鼠标横坐标if(x < getPosition(boxDiv).left){
	x = getPosition(boxDiv).left;
}
var width = mainDiv.offsetWidth - 2;
	//选择层宽度var mainX = getPosition(leftUpDiv).left + 4;
	//左上角横坐标var addWidth = mainX - x;
	//拖动后应该增加的宽度//设置拖动后的宽高和位置mainDiv.style.width = (width + addWidth) + "px";
	mainDiv.style.left = mainDiv.offsetLeft - mainX + x + "px";
}
//上边拖动function upMove(e){
	var y = e.clientY;
	//鼠标纵坐标if(y < getPosition(boxDiv).top){
	y = getPosition(boxDiv).top;
}
var height = mainDiv.offsetHeight - 2;
	//选择层的高度var mainY = getPosition(leftUpDiv).top + 4;
	//左上角纵坐标var addHeight = mainY - y;
	//拖动后应该增加的高度//设置拖动后的宽高和位置mainDiv.style.height = (height + addHeight) + "px";
	mainDiv.style.top = mainDiv.offsetTop - mainY + y + "px";
	//纵坐标减去增加的高度}
//下边拖动function downMove(e){
	var y = e.clientY;
	//鼠标纵坐标if(y > getPosition(boxDiv).top + boxDiv.offsetHeight){
	y = getPosition(boxDiv).top + boxDiv.offsetHeight;
}
var height = mainDiv.offsetHeight - 2;
	//选择层的高度var mainY = getPosition(leftUpDiv).top + 4;
	//左上角纵坐标var addHeight = y - mainY - height;
	//拖动后应该增加的高度mainDiv.style.height = (height + addHeight) + "px";
}
//右边拖动function rightMove(e){
	var x = e.clientX;
	//鼠标横坐标if(x > getPosition(boxDiv).left + boxDiv.offsetWidth){
	x = getPosition(boxDiv).left + boxDiv.offsetWidth;
}
var width = mainDiv.offsetWidth - 2;
	//选择层宽度var mainX = getPosition(leftUpDiv).left + 4;
	//左上角横坐标var addWidth = x - width - mainX;
	//拖动后应该增加的宽度//设置拖动后的宽高和位置mainDiv.style.width = (width + addWidth) + "px";
}
//设置选择区域可见function setChoice(){
	var top = mainDiv.offsetTop;
	var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
	var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
	var left = mainDiv.offsetLeft;
	document.getElementById("img2").style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
	preview({
	"top":top,"right":right,"bottom":bottom,"left":left}
);
}
//获取元素的绝对位置function getPosition(node){
	var left = node.offsetLeft;
	var top = node.offsetTop;
	current = node.offsetParent;
	// 取得元素的offsetParent　// 一直循环直到根元素　while (current != null){
	left += current.offsetLeft;
	top += current.offsetTop;
	current = current.offsetParent;
}
return{
	"left":left,"top":top}
;
}
//预览function preview(view){
	var previewImg = document.getElementById("img3");
	previewImg.style.top = -view.top + "px";
	previewImg.style.left = -view.left + "px";
	previewImg.style.clip = "rect("+view.top+"px,"+view.right+"px,"+view.bottom+"px,"+view.left+"px)";
}
}

附件:下载该文件资源,减少时间成本(增值服务)