jquery 图片裁切预览,简单拖动

看到网上的图片裁切，很是有感觉，我自己基于jquery-ui，然后根据大家普遍接受的clip原理，实现的简单的预览

想整张图片，不知道怎么整上。

 

 

// JavaScript Document
var x;
var y;
var prex;
var prey;
$(document).ready(function(){
					$("#layhandle").draggable({cursor:"move",containment:"#laycropper"});
					$("#layhandle").resizable({ handles: 'n, e, s, w' });//调整为四个方向改变
			    	document.onmousemove=getpos;
						   });

//获取有用坐标
function getpos(){
		/*var x=$("#layhandle")[0].offsetWidth-$("#layhandle")[0].clientLeft;//包括边框
		var y=$("#layhandle")[0].offsetHeight-$("#layhandle")[0].clientTop;*/
		 x=$("#layhandle")[0].clientWidth;//获取可见部分宽度，去掉border
		 y=$("#layhandle")[0].clientHeight;//获取可见部分高度，去掉border
		var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽
		var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高
		//alert($("#layhandle")[0].parentNode.clientWidth);
		/*
		rect(top,right,bottom,left)
		**/
		var rtop=parenty;
		var rright=parentx+x;
		var rbottom=parenty+y;
		var rleft=parentx;
		var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";
		$("#laycropper img").css("clip",rectt);//利用clip功能实现切割
		createview();
	}
//生成一个按比例放大后的部分图像，显示在一个预览框里
function createview(){
		var bili=2;
		 prex=$("#layhandle")[0].clientWidth;//获取可见部分宽度，去掉border
		 prey=$("#layhandle")[0].clientHeight;//获取可见部分高度，去掉border
		var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽
		var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高
		var rtop=parenty*bili;
		var rright=(parentx+x)*bili;
		var rbottom=(parenty+y)*bili;
		var rleft=parentx*bili;
		var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";
		$("#preview img").css("clip",rectt);
	}

 

 代码很简单，使用的只是简单的操作，希望大家自己做拓展，这里只是简单的思路，我也再完善完善，让其更加自定义。

js拖放功能使用jquery-ui，用起来方便，但终究不是自己的，自己也从网上学习后，写了个简单的拖动脚本。

 

 

// JavaScript Document
var layerx;
var layery;
var i=0;
$(document).ready(function(){
						  $("#demo")[0].onmousedown=drag;//准备拖动
						  $("#demo")[0].onmousemove=dmove;//开始拖动
						  document.onmouseup=delmouse;//停止移动
						   });
			function drag(event){
				event=event||window.event;
				stopBubble(event);
				stopdefault(event);
				i=1;
				layerx=event.offsetX||event.layerX;
				layery=event.offsetY||event.layerY;
				}
			function dmove(event){
				event=event||window.event;
				stopBubble(event);
				stopdefault(event);
				if(i==1){
				$("#demo")[0].style.left=event.clientX-layerx+"px";
				$("#demo")[0].style.top=event.clientY-layery+"px";
				}
				}
			function delmouse(){
				i=0;
				}
			//防止冒泡事件
			function stopBubble(e){
				if(e&&e.stopPropagation){
					e.stopPropagation();
					}
				else{
					window.event.cancelBubble=true;
					}
				}
				//阻止浏览器默认行为
			function stopdefault(e){
				if(e&&e.preventDefault){
					e.preventDefault();
					}
					else{
						window.event.returnValue=false;//取消默认事件
						}
				}
			

 缩放的原理也不难，在这就不发了。

 

评论

1 楼 夜之son 2010-11-29  

对不住大家了，我把浏览器默认行为取消后，ie还是不行。