1

but only find scrolling solutions.

What I'm trying to do is move a circle across the screen using animate (left or right), then of course up / down, which I can do.

The issue is when I want the browser to scroll with the circle up / down if needed, in a nice smooth manner.

This is some simple quick dirty code I wrote just to mess around

$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){
        $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){
            $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){
                $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){
                });
            });
        });
    });

Where / how would i make it scroll, Any suggestions tip, I plan on getting ride of the code I have below anyways.

4

1 回答 1

1

This is a working solution, based on your animation sequence:

See this working Fiddle Example!

HTML

<div id="circle"></div>

CSS normalized on the Fiddle, but not relevant

html, body {
  width: 100%;
  height: 100%;
}
#circle {
  width: 20px;
  height: 20px;
  background-color: #444;
  border: 1px solid #212121;
  border-radius: 10px;
  position: absolute;
  top: 300px;
  left: 300px;
}

jQuery You will need the plug-in .watch(), see link below

// initial values to your variables
var start     = 0,
    stopRight = 1000,
    downRight = 300,
    leftRight = 300;

// your code as it was
$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){
  $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){
    $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){
      $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){});
    });
  });
});

// the code to make it all happen!
$('#circle').watch("left,top", function() {
    $("html, body").animate({
        scrollTop  : $('#circle').offset().top,
        scrollLeft : $('#circle').offset().left,
    }, 20);
}, 100);

Plug-in used

jQuery CSS Property Monitoring Plug-in

What this does is to track the element movement and manipulate the scrollbars to keep it visible at all times.

The jQuery .scrollTop() Get the current vertical position of the scroll bar for the first element in the set of matched elements.

The jQuery .scrollLeft() Get the current horizontal position of the scroll bar for the first element in the set of matched elements.

The jQuery .offset() Get the current coordinates of the first element in the set of matched elements, relative to the document.

于 2012-06-09T00:07:10.233 回答