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;
}

移动它的尾巴必须在所有方向上我想在哪里只需要越过边界的bt ..请一些人提供解决方案。

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 回答