Question

我正在创建一个语音气泡，我想用鼠标在气泡的角落拖动讲话气泡的尖端。它也应该根据它所在的一侧自动旋转。

我的代码：

<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一些给出解决方案。

Answer 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以查看其实际效果

Answer 2

如果您要查找的是将箭头移动到正方形的顶部，则需要将指针样式更改为：

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

FIDDLE

用鼠标移动/旋转语音气泡的尾部

2 个答案: