当前位置：文江博客话题详情

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

发布于 2024-12-08 13:34:01 字数 101 浏览 0 评论 0原文

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

请给我一些想法，谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乙白 2024-12-15 13:34:01

您尝试过 Jcrop 吗？

回复收藏 0 原文

最丧也最甜 2024-12-15 13:34:01

使用 jQuery Draggable 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; }

Using jQuery Draggable UI: http://jsfiddle.net/antonysastre/j9UUm/10/

Basically using a containment on the draggable element that is dynamically calculated and hidden with overflow.

In short:

The 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>

The 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'
    });
});

The CSS

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

回复收藏 0 原文

~没有更多了~