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

说明：当您移动鼠标时，clipping rectangle 的顶部值会更改为当前鼠标位置。

Answer 2

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

HTML

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

如您所见，#content 是随鼠标变化的黑色 div。接下来，您将 css 关联到 html。

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，所以你可以随意更改。