闲来无事 百度加自己理解 写了一个剪切图片的小例子
效果:
关键代码如下:
一:样式
body{background:#333} .box{position: absolute;top:100px;left:200px;} #preview{position:absolute ;top:100px; left:600px} .main{position: absolute;width: 200px;height: 200px;border:1px solid #fff;z-index: 2;cursor: move} img{position: absolute;z-index: 1} .img1{opacity: 0.6} #preview{position: absolute;top:100px;left:680px;width:460px;height:360px;} #preview #img3{position: absolute;top:0;left:0;}
二:页面html
<body style="cursor: auto;">
<!--上部分 原始图-->
<div id="box" class="box">
<img class="img1" id="sourceImg" src="img/9f510fb30f2442a7a75aaf95d243ad4bd11302ad.jpg" />
</div>
<div id="preview">
</div>
</body>
三:js脚本
<script type="text/javascript"> <!-- $(function(){ var count =0; var sourceImg = $("#sourceImg"); //添加一个可选区域到图片上 var box = $("#box"); var mainDiv = $('<div class="main" id="main"></div>'); mainDiv.draggable( { containment: 'parent',drag: function(){ try{ console.log("移动-->"+count); count++; } catch (e){} } }); box.append(mainDiv); var preview = $("#preview"); var previewImg = $('<img id="img3" class="" />'); previewImg.attr('src',sourceImg.attr('src')); preview.append(previewImg); //初始化设置位置,及缩略图 setPosition(mainDiv,previewImg); //鼠标相关事件 mainDiv.ready(function(){ var isDown = false; //按键 mainDiv.bind("mousedown", function(){ isDown = true; }); //按键释放 mainDiv.bind("mouseup", function(){ isDown = false; }); mainDiv.bind("mousemove", function(){ //在按键未被释放的移动过程中 重置位置,及缩略图 if(isDown){ setPosition($(this),previewImg); } }); }); function setPosition($mainDiv,$img){ //通过jQuery对象转换成 Dom对象 var mainDiv = $mainDiv.get(0); var img = $img.get(0); //获取偏移量 var top = mainDiv.offsetTop; var right = mainDiv.offsetLeft+mainDiv.offsetWidth; var bottom = mainDiv.offsetTop+mainDiv.offsetHeight; var left = mainDiv.offsetLeft; //重新设定 图片的左上 坐标, 否则显示的缩略图会动(感兴趣的可以把下面两段话注释看效果) img.style.top = -top+"px"; img.style.left = -left+"px"; img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; } }); //--> </script>
四:关键点
- mainDiv.draggable(); jQuery-ui功能, 支持Dom元素拖拽
- img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; 设置 图片的剪切
- cursor: move 样式,元素的鼠标放上去样式,显示可移动
- .img1{opacity: 0.6} 透明度
完整代码见附件:
http://dl.iteye.com/topics/download/ab31c2e1-21e9-352b-9219-60f08876e27e