0

ユーザーのプロフィール写真を円形の div にしようとしています。ユーザーが Facebook のプロフィール写真やカバー画像でできることと同様です。

注: ここの画像は div の背景画像です。内部ではありません<img>。

円形 div の画像機能をユーザーにドラッグ/調整させるにはどうすればよいですか?

Circular 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

ディスプレイのようなdivを使用して、画像を配置できます。親divは丸められ、オーバーフローが隠されている必要があり、画像の子にはjquery uiのdraggable()メソッドを使用できます。例については、こちらをご覧ください: JQuery UI Examples

これは一例ですが、webkit オーバーフローの非表示にはバグがあります。 バグを修正するために 1 つのマスクで試すことができるJsfiddle の例

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