How can I create a "zoom" effect using jQuery and switching the source image?
I have an array of images that get on the browser and when the user hovers over them I have this effect occur:
$('.thisImage').hover(function(){
zindexnr++;// Bring picture to the foreground
var cssObj = {
'z-index' : zindexnr,
'-webkit-transform' : 'rotate(0deg)',
'-webkit-box-shadow' : '#888 5px 10px 10px'
};
$(this).css(cssObj);
}, function(event, ui){
var tempVal = Math.round(Math.random());
if(tempVal == 1) {
var rotDegrees = randomXToY(330, 360); // rotate left
}else{
var rotDegrees = randomXToY(0, 30); // rotate right
开发者_如何学Go }
var cssObj = {
'-webkit-box-shadow' : '',
'-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
};
$(this).css(cssObj);
});
The images rotate pretty nicely and have a good drop shadow. But what I want to do is to change the source of the image from a thumb-sized one to a big one and make it seem as if the image were zooming (as much as possible). How can I make the latter?
Also, would it be a good idea to preload the big images as well?
EDIT
I should say I already looked around some posts in SO but didn't find any that quite did what I want to. Hence I'm asking.
JS Fiddle: http://jsfiddle.net/WatTA/ so you guys can see what I've got so far =)
You can try playing around with your images width. By setting the image width on hover, the height will change and keep in proportion. This will create the zoom effect [this version is without animation]
http://jsfiddle.net/WatTA/1/
You will see that I set the origW
variable at the top to make it global, so that on mouse out you can revert back to original width state.
UPDATE
I have added the image source switcher:
http://jsfiddle.net/WatTA/2/
I have added another array, it matches the array images
and imagesHover
to swap source on hover.
Hope this helps.
精彩评论