Question

我在浏览器上有一系列图像，当用户将鼠标悬停在它们上面时，我会发生这种效果：

 $('.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小提琴：http://jsfiddle.net/WatTA/所以你们可以看到我到目前为止所拥有的东西=）

Answer 1

您可以尝试使用图像宽度。通过在悬停时设置图像宽度，高度将改变并保持成比例。 这将创建缩放效果 [此版本没有动画]

http://jsfiddle.net/WatTA/1/

您将看到我将origW变量设置在顶部以使其成为全局变量，因此在鼠标移出时您可以恢复到原始宽度状态。

<强>更新

我添加了图像源切换器：

http://jsfiddle.net/WatTA/2/

我添加了另一个数组，它匹配数组images和imagesHover来悬停交换源。

希望这有帮助。

如何使用jQuery创建“缩放”效果并切换源图像？

1 个答案: