0

我正在尝试在圆形 div 中使用用户的个人资料照片。类似于用户可以对 facebook 的个人资料图片或封面图片执行的操作。

注意：这里的图片是div的背景图片。不在里面<img>。

如何让用户拖动/调整圆形 div 的图像功能？

循环 div 的 CSS

.circular {
    width: 6em;
    height: 6em;
    border-radius: 3em;
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    background: url('../img/id.jpg') no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
4

2 回答 2

1

您可以使用 jqueryUIdraggable()方法：

$('image_to_drag').draggable();
于 2013-05-07T21:00:23.553 回答
1

您可以使用类似显示的 div 并放入您的图像。父 div 需要四舍五入并隐藏溢出，对于图像子，您可以使用 jquery ui 的 draggable() 方法。在这里查看示例：JQuery UI 示例

这是一个例子，但是 webkit 溢出隐藏是错误的。 Jsfiddle 示例 ，您可以尝试使用一个掩码来修复错误

$(document).ready(function()
{
   $(".avatar").draggable(); 
});
于 2013-05-07T21:08:13.433 回答