我如何才能创建一个；“缩放”；使用jQuery和切换源映像的效果如何？

我在浏览器上有一组图像，当用户将鼠标悬停在这些图像上时，会产生以下效果：

 $('.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
            }
            var cssObj = { 
                '-webkit-box-shadow' : '',
                '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
            };
            $(this).css(cssObj);
        });

图像旋转得很好，有很好的阴影。但我想做的是将图像的来源从拇指大小的图像更改为较大的图像，并使图像看起来像是在缩放（尽可能地放大）。我怎么做后者

另外，预加载大图像也是一个好主意吗

编辑

我应该说，我已经在SO中查看了一些帖子，但没有找到任何符合我要求的帖子。因此我要问

---

JS Fiddle：这样你们就可以看到我到目前为止得到的东西=）

你们可以试着用你们的图像宽度玩游戏。通过设置悬停时的图像宽度，高度将发生变化并保持比例这将创建缩放效果[此版本没有动画]

您将看到，我在顶部设置了

origW

变量，使其成为全局变量，以便在鼠标悬停时可以恢复到原始宽度状态

更新

我添加了图像源切换器：

我添加了另一个数组，它匹配数组

images

和

imagespover

，以在悬停时交换源代码

---

希望这能有所帮助。

您是否有一个或类似的现场演示，我们可以用它进行实验？至于预加载大图像，这取决于有多少图像以及它们的分辨率。预先加载大图像不是最好的主意，但另一方面，按需加载可能会导致一些“闪烁”，因为更大版本的悬停图像需要一些时间才能加载。@David这是JS Fiddle：我从互联网上获得了随机图像，因为我在本地主机上工作。很抱歉，我的链接太长了those@Luis，不用担心长名称/链接。感谢演示=）