1

我有一个以设定宽度显示图像的页面。高度是可变的，因此图像保持其纵横比。鼠标悬停时，图像会发生变化，但高度也会发生变化。我怎样才能保持高度和宽度相同，只是让新图像使用最后一个图像的最大高度/最大宽度，这样容器就不会调整大小。

见这里 - http://jsfiddle.net/z3sxc/11/

<style>
li {
    width: 190px;
    border: 1px solid black;
    list-style: none;
}

li img{
    width: 100%;
}
</style>
<body>
    <ul>
        <li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">      
        </li>
        <li onmouseover="clip_2.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_2.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_2">      
        </li>
    </ul>​
</body>
4

4 回答 4

1

你可以试试这个 - DEMO

$("li")
    .on("mouseover", function() {
        var h = $(this).height();
        $(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
        $(this).height( h );
})
    .on("mouseout", function() {
        $(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});
于 2012-11-13T17:24:03.233 回答
1

无需 JavaScript/jQuery 即可实现此效果。

只需在 css 类中定义块元素（例如<div />，<span style="display: inline-block" />等）的背景图像，然后更改背景图像:hover。

见这里：http: //jsfiddle.net/adamb/z3sxc/15/

HTML：

<div class="picture" />

CSS：

.picture {
    background: url(http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg) no-repeat;
    background-size: 190px;
    width: 190px;
    height: 190px;
    border: 1px solid black;
}

.picture:hover {
    background: url(http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg) no-repeat;   
    background-size: 190px;
}
于 2012-11-13T17:31:25.653 回答
0

您可以添加一个 Javascript 函数来更改元素上的 CSS：

function changeImage() {
    clip_1.style.maxWidth = clip_1.width + 'px';
    clip_1.style.maxHeight = clip_1.height + 'px';
    clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg';
}​

<li onmouseover="changeImage()" ... />

（住在这里）

于 2012-11-13T17:24:07.417 回答
0

这里有一些可以帮助你入门的东西。

我做的第一个调整是<div>用一个通用的 CSS 类名把你的图片包裹起来：

<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
    <div class="clip">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">      
       <div>
</li>​

然后你可以给那个类一些有助于调整大小的样式：

.clip {
    overflow: hidden;
}

然后在上面加上一点 jQuery：

$(function() {
    $('.clip img').load(function() {
        $(this).parent('.clip').css({ 
            width: $(this).width(), 
            height: $(this).height() 
        }); 
        $(this).unbind('load'); // only do this once             
    });            
});​

​演示

于 2012-11-13T17:26:15.357 回答