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

これを試すことができます -デモ

$("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

要素の CSS を変更する Javascript 関数を追加できます。

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 に答える