JS实现校内网"图片圈人"功能效果

　　在之前写的文章Javascript Resize和Drag类,基于jQuery 的回复中，skyaspnet问我可否用这两个类实现校内网的“图片圈人”。当时我并不知道什么是“图片圈人”，就去校内网查看了一番，试用了这个功能，发现我可以实现这个功能。所以就实现了这个效果，并与大家分享讨论。

效果演示

• 相片中：
• aaa (删除)
• ,bbba (删除)
• ,ccc (删除)

输入标签：

确认取消

 

实现原理

　　使用DragResize类，获取选区的左上角位置和高宽，将它存到数据库，鼠标移动到标签上时，使用已经获取到的数据在图片上显示一个框。

　　这里我记录下选区位置是的是相对于容器内部左上角的。

　　这个程序只是一个效果，没有将数据存储到数据库。

代码

　　photoTag类用来在图片上显示（show方法）和隐藏(hide方法)选区，发送请求并添加（add方法）一个选区和标签到数据库,删除(remove方法)一个选区和标签。

var photoTag = {   
    show: function(left,top,width, height, show_resize_square) {
        $('#select-area-box').css({'left':left - 7, 'top':top - 7})
        $('#select-area-box').width(width + 4).height(height + 4).show();
        $('#select-area').width(width).height(height);
        if(show_resize_square) $('#select-area-box span').show();
        else $('#select-area-box span').hide();
    },
    hide: function() {$('#select-area-box').hide();    },
    add:function(tag_name, left, top, width, height) {
        var json = {id:Math.floor(Math.random() * 10000)};
        //$.getJSON('add_tag.php', {'name':tag_name,'left':left,'top':top,'width':width,'height':height}, function(json) {
            //reflesh tag list
        //    if(json.message) alert(json.message);
        //    if(json.error == 0) {
                var args = left+','+top+','+width+','+height;
                var li = '<li>,';
                li += '<span onmouseover="photoTag.show('+args+');" ';
                li += 'onmouseout="photoTag.hide();">'+tag_name+'</span>';
                li += '(<a href="javascript:;" onclick="photoTag.remove('+json.id+',this.parentNode);" ';
                li += 'onmouseover="photoTag.show('+args+');" onmouseout="photoTag.hide();">删除</a>)';
                li += '</li>';
                $('#tag-list').append(li);                
        //    }
        //});
    },
    remove: function(id, li) {
        //$.getJSON('remove_tag.php', {'tag_id':id}, function(json) {
            //reflesh tag list
        //    if(json.message) alert(json.message);
        //    if(json.error == 0) 
                li.parentNode.removeChild(li);
        //});
    }
};

 

　　下面代码为该程序主要部分：在图片上单击一下就可以开始添加一个标签

 

$(function(){

var is_started = false;
// 选区左上角,和高宽
var info = {'left':0,'top':0,'width':0,'height':0};
var origin = {x:$('#enclose-wrapper').offset().left + (parseInt($('#enclose-wrapper').css('border-left-width'))||0),
              y:$('#enclose-wrapper').offset().top  + (parseInt($('#enclose-wrapper').css('border-top-width'))||0)};
var dnr = new DragResize($('#select-area-box')[0], {
    minWidth:20,
    minHeight:20,
    bound:{left:0,top:0,right:9999,bottom:9999},
    callback:function(i) {
        // 7为左(上)边两个边框的宽度的和, 4为左右(上下)篮色边框宽度的和
        info= {'left':i.left + 7,'top':i.top + 7,'width':i.width - 4,'height':i.height - 4};
        $('#select-area').width(info.width).height(info.height);
        // 将添加标签的表单定位在选区的右边
        $('#form-add-tag').css({'left':i.left + i.width + 10, 'top':i.top});
    }                
});
// 拖动选区
$('#select-area').mousedown(function(e){
    dnr.drag(e);
});
// 调整选区大小
$('#select-area-box span').mousedown(function(e){
    dnr.resize(e, this.className.replace('-resize', ''));
});
// 在图片上点击一下,开始获取选区
$('#photo').mousedown(function(e){
    if(is_started) return;
    is_started = true;
    var left = e.pageX - origin.x - 50 - 7;
    var top  = e.pageY - origin.y - 50 - 7 ;

    info= {'left':left + 7,'top':top + 7,'width':100,'height':100};
    photoTag.show(info.left, info.top, info.width, info.height, true);
    $('#form-add-tag').show().css({'left':left + 100 + 4 + 10, 'top':top});
});
// 鼠标进入图片内时,显示选区
$('#photo').bind('mouseenter',function(e){
    if(!is_started) return;
    photoTag.show(info.left, info.top, info.width, info.height, true);
});
// 确定添加一个标签,或取消
$('#btn-add-tag, #btn-cancel').click(function(e){
    if(this.id == 'btn-cancel') {
        $('#form-add-tag, #select-area-box').hide();
        is_started = false;
        return false;
    }
    if(!$('#tag-name').val()) {
        alert('标签名不能为空！');
        return false;
    }
    // 添加标签
    photoTag.add($('#tag-name').val(), info.left, info.top, info.width, info.height);
    // 隐藏选区和表单
    $('#form-add-tag, #select-area-box').hide();
    is_started = false;
});
photoTag.hide();

});

  

　　下面是HTML：

<div id="enclose-wrapper">
    <div id="photo-wrapper" style="margin:15px auto;text-align:center;">
        <img id="photo" src="heroes_s3_peter.jpg" />
    </div>

    <div>
    
    <ul id="tag-list">
    <li>相片中：</li>
    <li>
    <span onmouseover="photoTag.show(0,0,85,66);" onmouseout="photoTag.hide();">aaa</span> 
    (<a href="javascript:;" onclick="photoTag.remove('342',this.parentNode);" onmouseover="photoTag.show(0,0,85,66);" onmouseout="photoTag.hide();">删除</a>)
    </li>
    ...
    </ul>

    </div>

    <div id="select-area-box">
        <div id="select-area"></div>
        <span class="north-west-resize"></span><span class="north-east-resize"></span>
        <span class="south-west-resize"></span><span class="south-east-resize"></span>
    </div>

    <div id="form-add-tag" style="display:none;">
    输入标签：<br />
    <input id="tag-name" name="tag-name" type="text"  /><br />
    <button id="btn-add-tag" type="button">确认</button>
    <button id="btn-cancel" type="button">取消</button>
    </div>
</div>

 

  　　你也可以到这里查看该程序的演示。