-1

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

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

jsfiddle为此

4

1 回答 1

0

在这里，您可以看到一个正在运行的 javascript，它通过拖放来定位您的“尾巴”。 小提琴

var pointer = {};
$('#pointer').on('mousedown',function(e){
    pointer.moving = true;
    pointer.origin = $(this).position();
    pointer.mouseleft = e.clientX;
    pointer.mousetop = e.clientY;
    console.log(e, pointer);
}).on('mousemove', function(e){
    $this = $(this);
    if (!pointer.moving) {
        return true;
    }
    if ($this.hasClass('left') || $this.hasClass('right')){
        newTop = pointer.origin.top-pointer.mousetop+e.clientY;
        console.log(newTop,$this.parent().height());
        if(newTop < 0){
            $this.removeClass('left right').addClass('top').css({top: ''});
            pointer.moving = false;
        } else if(newTop+$this.outerHeight() > $this.parent().height()){
            $this.removeClass('left right').addClass('bottom').css({top: ''});
            pointer.moving = false;
        } else {
            $this.css({top: newTop});
        }
    } else {
        newLeft = pointer.origin.left-pointer.mouseleft+e.clientX;
        console.log(newLeft);
        if (newLeft < 0){
            $this.removeClass('top bottom').addClass('left').css({left: ''});
        } else if (newLeft+$this.outerWidth() > $this.parent().width()){
            $this.removeClass('top bottom').addClass('right').css({left: ''});
        } else {
            $this.css({left: newLeft});
        }
    }

}).on('mouseup', function(e){
    pointer.moving = false;
});

另外，我为矩形的每一边添加了四个 css 类。

.pointer {
    position: absolute;
    top: 10%;
    left: 10%;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: red transparent;
    border-width: 15px 15px 0;
}
.pointer.bottom{
    border-color: red transparent;
    border-width: 15px 15px 0;
    top: 100%;
}
.pointer.top{
    border-color: red transparent;
    border-width: 0 15px 15px;
    top: -15px;
}
.pointer.left{
    border-color: transparent red;
    border-width: 15px 15px 15px 0;
    left: -15px;
}
.pointer.right{
    border-color: transparent red;
    border-width: 15px 0 15px 15px;
    left: 100%;
}

此解决方案可以改进很多，但您可以将其作为起点。

于 2013-08-06T11:26:46.780 回答