Facebook 如何编辑个人资料图片缩略图？答案

【问题标题】：How does Facebook edit profile picture thumbnails?Facebook 如何编辑个人资料图片缩略图？
【发布时间】：2011-12-02 00:07:07
【问题描述】：

我正在开发一个迷你画廊，需要像 facebook 一样编辑缩略图。 Jquery可以吗？用特定容器拖动一个区域并获取顶部和左侧坐标，我只想获取坐标。

请给我一些建议，谢谢

【问题讨论】：

简短回答，是的，这是可能的。您可能希望包含此类问题的示例代码——人们会更愿意为您提供您正在寻找的帮助。

标签： jquery facebook thumbnails edit

【解决方案1】：

你试过Jcrop吗？

【讨论】：

【解决方案2】：

使用 jQuery 可拖动 UI：http://jsfiddle.net/antonysastre/j9UUm/10/

基本上在可拖动元素上使用一个容器，该元素是动态计算并通过溢出隐藏的。

简而言之：

HTML

<div class="body">
    <div class="thumbnail">
        <div class="containment">
            <div class="image"><img src="http://lorempixel.com/200/260/fashion" /></div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function() {
    $('.thumbnail .containment img').each(function() {
        var height = $(this).height();
        var overflow = (height - 160); // Using explict value here for now.
        var containerHeight = (overflow * 2) + 160; // And also here.
        var containerTop = Math.abs(overflow) * -1;
        $(this).parents('.containment').css({'top': containerTop});
        $(this).parents('.containment').css({'height': containerHeight});
    })

    $('.image').draggable({
        containment: 'parent',
        axis: 'y'
    });
});

CSS

.containment { position: relative; }
.thumbnail {
    width: 160px;
    height: 160px;
    position: relative;
    overflow: hidden;
}
.thumbnail .image { position: relative; }
.thumbnail img { max-width: 160px; }

【讨论】：