html5/js: заполняющее кольцо на слайде

Question

Я бы хотел заполнить и удалить html div на слайде вверх и вниз. Если пользователь скользит на # экране, заполнение #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

Может быть, вы ищете что-то вроде этого.

HTML

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

Как вы можете видеть, #content является черный ДИВ, что изменится с помощью мыши. Затем у вас есть 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, так что вы можете изменить все, что вы хотите.

Answer 2

Вот еще одно решение с использованием 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; 
} 

Explanation: при перемещении мыши верхнее значение clipping rectangle изменяется на текущую позицию мыши.