Jquery html5/js：幻灯片上的填充环

我想填充和清空幻灯片上的html div。 如果用户在#屏幕上向上滑动#环填充增加，如果用户向下滑动， 它减少了。如图所示：

希望你能帮忙：）

---

也许你在找这样的东西

HTML

最后是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});
    });   
});

---

我已经做了一个，所以你可以随意更改。

这里是另一个使用

剪辑的解决方案


HTML:

CSS:

说明：当您移动鼠标时，的顶部值将更改为当前鼠标位置。
检查看起来不错，但在触摸式智能手机上不起作用。有可能让它触碰吗？因此，填充物在向上滑动和向下滑动时发生变化？
<div id="ring" style="">
    <div id="content"></div>
</div>

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

$("#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});
    });   
});

<div id="circle">

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

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