Imagine this code (simplified)
<img id="leftArrow"/>
<div style="overflow:hidden; width:300px">
<img id="wideImage" style="width:1000px; position:absolute; left:0"/>
</div>开发者_StackOverflow中文版
<img id="rightArrow"/>
that will result in something like this
(source: aximili at home.exetel.com.au)How do you make #wideImage scroll smoothly to the left when #rightArrow is hovered?
I am after something like this
$('#right').hover(function() {
//On hover, accelerate #wideImage to the left
}, function() {
//On mouse out, decelerate to stop
});
Thanks in advance!
Maybe you should give a look @ this
This sort of does it
$('#right').hover(function() {
$('#wideImage').animate({ left: '-=50' }, 250, 'easeInQuad', function () {
$('#wideImage').animate({ left: '-=600' }, 250, 'linear', function () {
$('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad');
});
});
}, function() {
$('#wideImage').stop();
$('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad');
});
Here is nice tutorial that essentially does the same thing you are trying to do (automatically too)
Edit: Oh, your screen shot kind of threw me off, I was thinking you wanted to scroll through multiple images, but now I see you want to pan across one very wide one?
I made a demo to answer another question, but I updated it so you could just hover over the buttons to animate the image. I hope this is more like what you wanted.
精彩评论