0

吹き出しを作成していますが、吹き出しの先端をマウスで吹き出しの隅々までドラッグしたいと考えています。また、どちら側にあるかに応じて自動的に回転するはずです。

私のコード:

<div class="bubble">
        <div class="pointer" id="position4">
        </div>
        <div class="pointerBorder" style="display: none; left: 74px; top: 120px; border-width: 14px 14px 0px; border-color: rgb(127, 127, 127) transparent;">
        </div>
    </div>

CSS:  

.bubble {
    position: relative;
    top: 115px;
    height: 120px;
    width: 250px;
    background: #fff;
    background-color:red;
    border: #bbb solid 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin: 0 auto;
}
.pointer {
    content: "";
    position: absolute;
    top: 120px;
    left: 200px;
    display: block;
    width: 0;
    z-index: 1;
    border-color: red transparent;
    border-style: solid;
    border-width: 15px 15px 0;
}
.pointerBorder {
    content: "";
    position: absolute;
    top: 120px;
    left: 104px;
    display: block;
    width: 0;
    z-index: 0;
    border-color: blue transparent;
    border-style: solid;
    border-width: 20px 20px 0;
}

移動している尾はすべての方向にある必要があります。つまり、div のすべての側にドラッグできるようにする必要があります。これは片側のみであり、マウス ドラッグで行う必要があります。マウスを使用して尾をドラッグできるようにするためです。国境を越えてのみすべきbtが欲しいところはどこでも..plz解決策を教えてください。

4

2 に答える 2

1

しっぽをボーダーに沿って動かしたい場合は、次のようにすることができます。

var direction = "right";
var movementInterval = 1;

setInterval(function() {
    var left = $('.pointer').css('left');
    var leftNumber = parseInt(left, 10);

    if(direction == "right"){
        if(leftNumber > 200){
            direction = "left";
        }
        leftNumber += movementInterval;
    }else{
        if(leftNumber < 15){
            direction = "right";
        }
        leftNumber -= movementInterval;
    }

    $('.pointer').css('left', leftNumber + 'px');
}, 10);

このjsFiddleを見て、実際の動作を確認してください

于 2013-08-05T10:47:37.577 に答える
0

探しているのが矢印を正方形の上部に移動することである場合は、ポインターのスタイルを次のように変更する必要があります。

.pointer {
content: "";
position: absolute;
top: -10px;
left: 200px;
display: block;
width: 0;
z-index: 1;
border-color: red transparent;
border-style: solid;
border-width: 0 15px 15px;
}

フィドル

于 2013-08-05T09:59:34.207 に答える