图片切割插件分步实现(二)

相对于上一个版本,

1,这次修复了container位置在左上角的bug,

2,容器container大小改为图片本身大小,

3,控制层controlLayer以及切割显示层imgLayer改为通过js初始化(方便以后添加调整)

4,容器container位置也可以随意调整而不影响其它功能

效果:http://oospace.sinaapp.com/cut1.php

代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>图片切割</title>
</head>
<style>
body{
 background-color:#DCDCDC; 
}
.container{
 position:absolute;
 border:1px solid black;
 border-radius:3px;
 background-color:#000000;
 
}
.imgLayer{
 position:absolute;
}
.controlLayer{
 position:absolute;
 zoom:1;
 border:1px dashed black;
 /*cursor:move;*/
}
.mark{
 border:1px solid #000000;
 background-color:#ffffff;
 opacity:0.8;
 filter:alpha(opacity=80);
 padding:2px;
 height:3px;
 width:3px;
}
.leftTop{
 position:absolute;
 top:-3px;
 left:-3px;
 cursor: se-resize;
}
.leftCenter{
 position:absolute;
 top:50%;
 left:-3px;
 cursor: w-resize;
}
.topCenter{
 position:absolute;
 top:-3px;
 left:50%;
 cursor: ns-resize;
}
.rightTop{
 position:absolute;
 top:-3px;
 right:-3px;
 cursor: ne-resize;
}
.rightCenter{
 position:absolute;
 top:50%;
 right:-3px;
 cursor: e-resize;
}
.leftBottom{
 position:absolute;
 bottom:-3px;
 left:-3px;
 cursor: ne-resize;
}
.bottomCenter{
 position:absolute;
 bottom:-3px;
 left:50%;
 cursor: s-resize;
}
.rightBottom{
 position:absolute;
 bottom:-3px;
 right:-3px;
 cursor: se-resize;
}
#imgStyle{
 display:none;
}
#rect{
 position:absolute;
 right:0px;
}
</style>
<body>
<img  id="imgStyle" />
    <div class="container">
 </div>
 
  <div  class="imgLayer">
  </div>
 
 <div class="controlLayer">
  <div class="leftTop  mark"></div>
  <div class="topCenter mark"></div>
  <div class="rightTop mark"></div>
  <div class="leftCenter mark"></div>
  <div class="rightCenter mark"></div>
  <div class="leftBottom mark"></div>
  <div class="bottomCenter mark"></div>
  <div class="rightBottom mark"></div>
 </div>
 
 <div id="rect"></div>
</body>
<script  type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
//拖动效果代码
//var _z=9999;
$(document).ready(function(){
var img=$(".imgLayer");//图片切割层
var ctain=$(".container");//容器
var imgStyle=$("#imgStyle")//
//初始化图片地址(注意,只能在onload之前添加图片才有效) 
imgStyle.attr("src","img/cut.jpg");//图片地址
ctain.css({background:"url(img/cut.jpg) top  left  no-repeat"});
img.css({background:"url(img/cut.jpg) top  left  no-repeat"});

 var _move=false;//移动标记
 var _x,_y;//鼠标离控件左上角的相对位置
 var wd;//窗口
 
 
 //设置宽度和高度
 
    $(".controlLayer").click(function(){
        //alert("click");//点击(松开后触发)
     this.style.cursor = "default";//鼠标形状
     //this.style.zIndex = 999;
        }).mousedown(function(e){
        _move=true;
        wd=$(this);
        this.style.cursor = "move";//鼠标形状
        //this.style.zIndex = _z;//窗口层次
        //_z++;
        _x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
        _y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));
  
       /*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
        $(document).mousemove(function(e){
            if(_move){
                var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                var y=e.pageY-_y;
    
    //设置controlLayer的范围
    var w_ctn=parseInt(ctain.css("width"));
    var h_ctn=parseInt(ctain.css("height"));
    var l_ctn=parseInt(ctain.css("left"));
    var t_ctn=parseInt(ctain.css("top"));
    var  w_wd=parseInt(wd.css("width"));
    var  h_wd=parseInt(wd.css("height"));
    
    var  imgLeft=parseInt(imgStyle.css("left"));
    var imgTop=parseInt(imgStyle.css("top"));
    
    l_ctn=isNaN(l_ctn)?0:l_ctn;
    t_ctn=isNaN(t_ctn)?0:t_ctn;
    
    //设置imgLayer的范围
    var top=y-t_ctn+"px";
    var right=parseInt(wd.css("width"))+x-l_ctn+"px";
    var bottom=parseInt(wd.css("height"))+y-t_ctn+"px";
    var left=x-l_ctn+"px";
    var rect="rect( "+top+" "+right+" "+bottom+" "+left+" )";
    
    //根据container控制移动范围
    if(w_ctn>=(x+w_wd-l_ctn)&&(x>=l_ctn)&&h_ctn>=(y+h_wd-t_ctn)&&(y>=t_ctn)){
     wd.css({left:x,top:y});//控件新位置
     img.css("clip",rect);//切割位置
    }
    
    $("#rect").html(rect);
    
    //var ximg=e.pageX-_ximg;//移动时根据鼠标位置计算控件左上角的绝对位置
    //var yimg=e.pageY-_yimg;
    //img.css({top:yimg,left:ximg});//图片新位置
    
            }
        }).mouseup(function(){
        _move=false;
        /* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
      });
    });
    
});

//初始化
window.onload=function(){
 
 var img=$(".imgLayer");//图片切割层
 var ctain=$(".container");//容器
 var imgStyle=$("#imgStyle")//
 var control=$(".controlLayer");
  
 var  imgWidth=imgStyle.css("width");//注意只能放在window.onload里面,因为只有图片加载完毕以后才能它的获取大小
 var  imgHeight=imgStyle.css("height");
 
 
 
 var  imgLeft=30;//初始化container的位置
 var imgTop=40;
 
 img.css({width:imgWidth,height:imgHeight});//根据图片本身大小自动设置容器层container和图片切割层的大小
 ctain.css({width:imgWidth,height:imgHeight,opacity:"0.4",filter:"alpha(opacity=40)",left:imgLeft+"px",top:imgTop+"px"});
 
 var  lf=imgLeft;//初始化控制层controlLayer大小及切割显示层imgLayer大小
 var tp=imgTop;
 var wt=ht=90;
   
 lf=isNaN(lf)?0:lf;
 tp=isNaN(tp)?0:tp;
 //调整三层的位置
 control.css({left:lf+"px",top:tp+"px",width:wt+"px",height:ht+"px"});
 ctain.css({left:lf+"px",top:tp+"px"});
 img.css({left:lf+"px",top:tp+"px"});
 
 //初始化切割层显示区域
 var rect="rect( "+0+"px  "+wt+"px  "+ht+"px  "+0+"px )";
 img.css({"clip":rect});
 $("#rect").html(img.css("clip"));
}
</script>
</html>
时间: 2024-10-10 08:09:13

图片切割插件分步实现(二)的相关文章

图片切割插件分步实现(一)

该插件是在窗口拖动效果的基础上实现的 回头再写详细点,时间比较急.先贴上代码 插件源码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

推荐一款手机端的图片滑动插件iSlider

首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html 这是demo 众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢? 这个插件吸引我的有两点, 一是它不依赖与jquery,采用原生代码书写.二是它使用起来非常容易,而且除了图片,还支持普通的dom元素,滑动方式多样,效果丰富. 但是它也有些缺点,其一就是它提供的接口太少了. 在为轮播图片提供一些功能按钮时,比如说,上一张.下一张.自动播放等.使用这个插件就有些力不

Html5添加制作全屏响应式效果的图片画廊插件教程

一.安装 npm install jquery-gallerybox 二.使用方法 <link rel="stylesheet" type="text/css" href="css/gallerybox.css">               <script src="js/jquery.min.js"></script> <script src="js/jquery.gal

推荐几款jquery图片切换插件

一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利用静态网页的形式进行展示. 二.用到的四个免费的jquery插件 注:都是网上免费的,自己测试过了,挺好用的,顺便改了改. 1.3D Change 下载地址:https://github.com/hjzgg/picture_show/tree/master/3D_change 效果展示 2.Samp

Discuz升级!图片查看插件(支持鼠标缩放、实际大小、旋转、下载)

图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看插件.希望可以帮助到大家,有不对的地方也欢迎大家给以正确的指导. (1)discuz的实现过程及效果 (2)discuz的局限性 (3)discuz的改进步骤 (4)兼容性及最后效果 (5)总结(常见问题) demo示例:http://zyk3.ataw.cn/discuz/index.html 一.discuz的实现过程及效果 点击图片,弹出层有大图,同时有在新

转载jQuery图片放大插件[twiPicZoom]

转载http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/ 功能说明: 双击查看大图,鼠标滚动放大缩小,能够切换到上一张和下一张,点击右上角关闭,兼容主流的浏览器. 截图效果: (例子一效果) (例子二效果:注,如果第一张的时候,左侧就不会显示前一张箭头,最后一张类似) 如何使用:(include) 1.样式 twiPicZoom.css 2.jQuery的类库,不一定要用1.8.3,其他的版本也行. 3.鼠标

jQZoom图片放大器插件。API说明文档,jQZoom使用说明

jQZoom是一个基于最流行的jQuery的图片放大器插件.它功能强大,使用简便.支持标准模式.反转模式.无镜头.无标题的放大,并可以自定义jQZoom的窗口位置和渐隐效果,修正IE6的select bug.使用之前,先引入jQZoom.js. zoomType,默认值:’standard’,另一个值是’reverse’,是否将原图用半透明图层遮盖. zoomWidth,默认值:200,放大窗口的宽度. zoomHeight,默认值:200,放大窗口的高度. xOffset,默认值:10,放大窗

jQuery图片切换插件jquery.cycle.js

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src

十个jQuery图片画廊插件推荐

jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQuery图片画廊插件: 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容,这要使用到幻灯片.幻灯片是最佳的可以展现大量的信息的方式.在这篇文章中我将展示使用MooTools / Jquery做出