0

我正在我的网站顶部制作一个小滑动条。它应该有点像 IOS 5+ 通知中心滑块。

HTML

<div id='orange'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla est velit, interdum consequat ante non, consectetur semper tortor. Aliquam convallis libero erat, a porttitor libero pretium ut. Phasellus convallis egestas tortor et fermentum. Nullam dignissim consectetur risus, in rhoncus urna venenatis eu. Donec non urna quis augue sollicitudin ornare. Aenean non faucibus nisi. Vestibulum porta quam quis massa tempus luctus. Quisque nisl nibh, feugiat id ante sed, auctor rhoncus est. Sed blandit enim sapien, in condimentum urna tristique vitae. Phasellus aliquam ipsum mattis fringilla vehicula. Mauris nec felis est. Nulla ullamcorper tellus a magna volutpat aliquet. Nunc nec venenatis sem.
    <div class='resize' onmousedown="verticalResize(document.getElementById('orange'), 6);"></div>
</div>

CSS

#orange {
    overflow:hidden;
    background-color: #ca4d0d;
    height: 6px;
    position: relative;
}
.resize {
    padding:0;
    height: 6px;
    width: 40px;
    cursor: n-resize;
    position: absolute;
    background-color: #000;
    bottom:0;
    left: 50%;
    margin: 0 0 0 -20px;
}

JAVASCRIPT

function verticalResize(element, min) {
    event = event || window.event;
    var mouseToBottom = (element.offsetTop + element.offsetHeight) - event.clientY;
    document.onmousemove = function (event) {
        var target = (event.clientY + mouseToBottom) - element.offsetTop;
        if (target < min || element.offsetHeight < min) {
            element.style.height = min + "px";
        } else if (target > element.scrollHeight || element.offsetHeight > element.scrollHeight) {
            element.style.height = element.scrollHeight + "px";
        } else {
            element.style.height = target + "px";
        }
    }
    document.onmouseup = function () {
        document.onmousemove = null;
        if (element.releaseCapture) {
            element.releaseCapture();
        }
    }
    if (element.setCapture) {
        element.setCapture();
    }
}

现在的问题是，我让它像我想要的那样工作（我正在测试我用 chrome 制作的任何东西，直到我得到它完美为止）。然后，当我在主要浏览器（IE、Opera、Safari、Chrome 和 Firefox）中对其进行测试时，除了 Firefox 之外，它运行良好。在 Firefox 上似乎鼠标事件永远不会被注册。

为什么是这样？我将如何解决它？

JSFIDDLE

4

1 回答 1

1

你event的没有定义。

你为什么使用内联函数？我看不出具体的原因。你可以这样处理，这也解决了你的问题：

document.getElementsByClassName('resize')[0].onmousedown = function (event) {
    var element = document.getElementById('orange');
    var min = 6;
    //...
};

http://jsfiddle.net/Mwh9s/1/

于 2013-06-21T20:36:05.293 回答