Question

我想用jquery切换来改变鼠标上的图像宽度，或者让我知道我是否可以在两个图像之间切换，即使用jquery切换来切换small_image和large_image

Answer 1

这个怎么样：

$("#img_id_here").mouseover(function()
{
  $(this).css('width', '200px');
});

你甚至可以试试这个：

<img src="whatever" onMouseOver="this.style.width='200px'" />

也可以用css完成：

<style type="text/css">
.img:hover /* you should apply img class to your image. */
{
  width:200px;
}
</style>

Answer 2

要获得最佳图像，通常需要以实际尺寸显示。实现两个映像使用的一种方法是使用mouseover和mouseout事件（jQuery中的.hover（））脚本交换SRC属性。

使用一些约定，您可以避免硬编码和描绘需要“缩放”的标准和大型图像文件名/位置。

图像文件：
（将所有标准尺寸的图像放入（例如）/ img /目录中;将全尺寸版本的图像放入/ img / big /）

example.com/img/tree.jpg  
example.com/img/lake.jpg  
example.com/img/big/tree.jpg  
example.com/img/big/lake.jpg

HTML：

<img class="zoomable" src="/img/tree.jpg" />
<img class="zoomable" src="/img/lake.jpg" />

jQuery的：

$(document).ready( function() {
    $("img.zoomable").hover(
    function(){
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('/img/', '/img/big/')); //swap to big
    }, 
    function(){
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('/img/big/', '/img/')); //swap back to small
    });
});

Answer 3

您可以比仅使用CSS更容易。

风格：

.photo .large { display: none; }
.photo:hover .small { display: none; }
.photo:hover .large { display: inline; }

HTML：

<div class="photo">
   <img class="small" width="60" height="40" src="smallimage.jpg" />
   <img class="large" width="600" height="400" src="largeimage.jpg" />
</div>

注意：IE 6仅支持：将鼠标悬停在链接上，因此您必须使容器成为链接而不是div以支持IE 6。

使用jquery悬停切换更改图像宽度

3 个答案: