闲来无事 百度加自己理解 写了一个剪切图片的小例子
效果:
关键代码如下:
一:样式
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
相关推荐
本项目基于Java AWT、SpringBoot、WebSocket和Canvas开发,包含322个文件,包括Java源代码、JavaScript脚本、PNG图片、ICO图标文件、JPG图片、CSS样式表、FTL模板文件、XML配置文件、数据库文件和EOT字体文件。...
演示文章的用法首先,您需要包括弹性滑块样式和脚本,以及外部Snap.svg弹性滑块。一个实验性滑块,它使用SVG剪切路径功能以及由Snap.svg驱动的动画。 DEMO文章用法首先,您需要包括弹性滑块样式和脚本以及外部Snap....
如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法: $('#elm1')....
. 在 <head> 中导入 cropper.css 样式表: 2. 在 <body> 的结束标签之前,按顺序导入如下的 js 脚本: 3. 在卡片的 layui-card-body 主体区域中,定义如下的 HTML 结构:
选择草图轮廓后,它将用于定义边界和剪切生成的图。 可以创建几种样式的Voronoi图。 图表中的每个单元格都有一个外边缘。 “边缘样式”可以指定为“曲线”或“直线”。 选择这些样式之一将创建一个熟悉的Voronoi图...
50、JS 禁止剪切、复制、粘贴的文本框代码 326 51、如何禁止火狐浏览器的右键功能 327 52、IE地址栏前换成自己的图标 327 53、关闭输入法 327 54、网页禁止保存复制代码大全 327 55、禁止打印页面 330 57、JS动态...
8.2.3 实现接口的类 131 8.2.4 继承的类的方法 132 8.3 键盘事件 132 8.3.1 键盘事件程序示例 132 8.3.2 键盘事件的各种属性 134 8.4 鼠标事件 136 8.4.1 鼠标事件程序示例 136 8.4.2 鼠标事件的各种...
(连续的图片设定利用时间设定即可实现此功能)16,全新加入添加歌曲的hta实用工具,手写添加歌曲代码已成为历史!17,图片文件支持,并新增加自动缩放功能让看图片成为一种享受!18,最新加入歌曲切换后的右下角...
(连续的图片设定利用时间设定即可实现此功能)16,全新加入添加歌曲的hta实用工具,手写添加歌曲代码已成为历史!17,图片文件支持,并新增加自动缩放功能让看图片成为一种享受!18,最新加入歌曲切换后的右下角...
(连续的图片设定利用时间设定即可实现此功能)16,全新加入添加歌曲的hta实用工具,手写添加歌曲代码已成为历史!17,图片文件支持,并新增加自动缩放功能让看图片成为一种享受!18,最新加入歌曲切换后的右下角...
(连续的图片设定利用时间设定即可实现此功能)16,全新加入添加歌曲的hta实用工具,手写添加歌曲代码已成为历史!17,图片文件支持,并新增加自动缩放功能让看图片成为一种享受!18,最新加入歌曲切换后的右下角...
(连续的图片设定利用时间设定即可实现此功能)16,全新加入添加歌曲的hta实用工具,手写添加歌曲代码已成为历史!17,图片文件支持,并新增加自动缩放功能让看图片成为一种享受!18,最新加入歌曲切换后的右下角...
(连续的图片设定利用时间设定即可实现此功能)16,全新加入添加歌曲的hta实用工具,手写添加歌曲代码已成为历史!17,图片文件支持,并新增加自动缩放功能让看图片成为一种享受!18,最新加入歌曲切换后的右下角...