Animate video scroller

Question

I have a div with an scoller icon on it:

.ui-slider
{ 
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    position: absolute;
    z-index: 1;
    display: block;
    position: relative;
    text-align: left;
 }

.ui-slider-handle
{
   position: absolute;
   z-index: 2;
   width: 16px;
   height: 16px;
   cursor: default;
 }

I use it like this in the code:

<div class="ui-slider">
 <a href="#" class="ui-slider-handle" style="left: 0px;" id="slid"/></div>

I would like to animate the ui-slider-handle with the user's mouse (like in video movie - so he could scroll on it). Moving the cursor with the user's mouse or the right key in the keyboard should be relevant to the div's width and to the movie size.

How can I do it?

Answer 1

I think You want to move your div to with respect to the mouse, ok for that you should set the left and top of the div according to the mouse coordinate some think like

jQuery(document).ready(function(){

   $(document).mousemove(function(e){

      $('.ui-slider').css({"top":e.pageY, "left":e.pageX});

   }); 

})