HTML5/JS:幻灯片上的填充环

Question

我想在上下滑动上填充和清空HTML Div。如果用户在#screen上滑动，则#ring填充会增加，如果他滑下来，它减少了。请参阅图：http：//imageshack.com/a/img607/5898/zdpv.jpg

希望您可以提供帮助：）

<div id="screen" style="position:absolute; with:100%; heigh:100%;"></div>
<div id="ring" style="height:500px; width:500px; border:2px solid #000000; border-radius: 50%;"></div>

Answer 1

这是使用clip

的另一种解决方案

http://jsfiddle.net/user2314737/d9xwj/

html：

<div id="circle">

javascript/jquery：

$(document).bind('mousemove', function (e) {
    $('#circle').css({
        "clip": "rect(" + e.pageY + "px,204px,204px,0px)"
    });
});

CSS：

#circle {
    height:200px;
    width:200px;
    border:2px solid #330099;
    border-radius: 50%;
    background-color: #330099;
    position: absolute;
}

说明：当您移动鼠标时，剪辑矩形的最高值更改为当前鼠标位置。

Answer 2

也许您正在寻找这样的东西。

html

<div id="ring" style="">
    <div id="content"></div>
</div>

您可以看到，#Content是将随鼠标变化的黑色DIV。接下来，您拥有与HTML关联的CSS。

CSS

#ring {
    position:absolute;
    overflow:hidden;
    height:200px; 
    width:200px; 
    border:2px solid #000000; 
    border-radius: 50%;
    margin-top:200px;
}
#content {
    position:absolute;
    width:100%;    
    background-color:#000;
    bottom:0px;
}

最后，JavaScript。我使用jQuery进行有关高度的变体。如您所见，我通过鼠标运动进行了变化。看看您在寻找的是，您只需要应用一些脚本或一些更改即可使其适用于智能手机或平板电脑或一些可接触的设备。

javascript

$("#ring").mouseenter(function() {
    $(this).mousemove(function(e) {
        var p_of = $(this).parent().offset();        
        var offset = $(this).offset();
        mouse_y = $(this).height() - e.pageY + offset.top;
        $("#content").css({'height' : mouse_y});
    });   
});

我已经制作了一个JSfiddle，因此您可以更改任何想要的东西。