círculo divs en titular con desbordamiento: desplazamiento oculto desplazamiento vertical y horizontal – mousemove

Estoy tratando de hacer divisiones circulares en el titular div. con overflow:hidden; . Estoy experimentando algunos problemas con el evento mousemove. Aquí está mi ejemplo: jsfiddle y aquí está mi objective: ello.co. También busqué algunas preguntas sobre mousemove pero no pude encontrarlas vertical y horizontalmente juntas. html:

 <div id="holder"><ul id="scroll"> <li><div class="si"></div></li> <li><div class="si"></div></li><ul> <li><div class="si"></div></li><ul> </ul> </ul></div> 

css:

 #holder { background: pink; width: 500px; height: 500px; overflow:hidden; line-height: 30px; margin-left: 100px; } #scroll{ height: 30px; line-height: 30px; margin-left: 0; padding: 0 10px; } #scroll li { float: left; padding: 0 5px; } .si{ width:150px; height:150px; background-color:black; float:left; border-radius:150px; margin:10px; } .si:hover{ width:160px; height:160px; margin:2px; } 

javascript:

 var sum = 0; $("#scroll li").each(function() { sum += $(this).width() + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('paddingRight')) }); $("#scroll").css('width', sum); $("#holder").mousemove(function(e) { x = -(((e.pageX - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingLeft')) + parseInt($("#scroll").css('paddingRight')) - $("#holder").width())); $("#scroll").css({ 'marginLeft': x + 'px' }); }); 

Si también desea que se mueva verticalmente, puede usar el mismo código que para x y adaptarlo:

http://jsfiddle.net/pAu8Q/511/

 y = -(((e.pageY - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingTop')) + parseInt($("#scroll").css('paddingBottom')) - $("#holder").width())); $("#scroll").css({ 'marginTop': y + 'px' });