开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜