1

スクリプトは次のとおりです。

function correctMe(){
var top_move = parseInt($('#image').css('height')) / 2;
$('#image').css({position : 'relative', top: '50%', marginTop: '-' + top_move + 'px'});
    $('#image').fadeIn(100);
}

そしてhtmlは次のとおりです。

<img id="image" onload="correctMe()" src="image.jpg" style="display: none;"/>

私の目標は次のとおりです。

  1. 画像を読み込む
  2. jQuery経由で配置する
  3. それを示す。

コードが機能しません。

4

5 に答える 5

2

display: nonetryを使用する代わりにvisibility: hidden。

<img id="image" onload="correctMe()" src="image.jpg" style="visibility: hidden;"/>

その後：

function correctMe(){
    var $image = $('#image'),
        top_move = parseInt($image.css('height'), 10) / 2;

    $image
        .css({
            position: 'relative',
            top: '50%',
            marginTop: - top_move,
            opacity: 0,
            visibility: visible
        })
        .animate({
            opacity: 1
        }, 100); 
}

PS:opacity: 0スタイルを直接設定しない理由は、IE<9 では動作しないためです。

于 2012-08-22T15:19:37.027 に答える
0

http://jsfiddle.net/bw2vy/1/

やってみました：

function correctMe(){
var top_move = parseInt($('#image').css('height')) / 2;
$('#image').css({position : 'relative', top: '50%', marginTop: '-' + top_move + 'px'});
$('#image').fadeIn(100); 
}

画像を div でラップしますか? 最初は onload なしで試してください。href で onclick を使用して、動作することを確認してください。

<div style="padding:20px; background: #ffcc00;"><img id="image" src="../images/icons/folder_magnify.png" width="50" height="50" /></div>

<a href="#" onclick="correctMe();">movenshow</a>

次に入れます：

<div style="padding:20px; background: #ffcc00;"><img id="image" onload="correctMe()" src="../images/icons/folder_magnify.png" width="50" height="50" style="display:none;" /></div>

私のためにそれをするようです。

于 2012-08-22T14:32:14.160 に答える
0

これをよく理解していれば、問題は画像が正しくフェードインされず、残りは正常に機能することです。それは、あなたが提供したサイトリンクで私が観察したことでもあります。フェードインが発生しないのは、画像が非表示になっていないためです。cssまたはjsを使用して、最初に画像を非表示にして、フェードインできるようにする必要があります...

また、jquery を介していくつかの静的プロパティを設定する理由がわかりません。スタイルシートで宣言しないのはなぜですか? margin-top が唯一の計算値であるため、js のみを使用して margin-top を設定します。

他の人が述べたように、jQuery セレクターをキャッシュすることは常に良い考えであり、パフォーマンスが向上します!

デモ用に小さな例を用意しました: http://jsfiddle.net/HRejn/

jquery:

var $image = $('#image');
var top_move = parseInt($image.height() / 2);
alert(top_move);
$image.css('margin-top', top_move + 'px');
$image.fadeIn(100);

CSS:

#image {
    position: relative;
    top: 50%;
    display: block; 
    display: none;    
}
于 2012-08-22T15:41:58.203 に答える
0

お役に立てれば

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <title>Position And Load</title>
    </head>
  <body>
    <div id="imageLoader" style="height:100%;width:100%;border:1px solid #B0B0B0">
        <img id="image" onload="loadImage();" src="http://www.paulmarc.org/sites/default/files/books/images/tux.png" style="display:none;"/>
    </div>
  </body>
  <script type="text/javascript">
    function loadImage(){
        var top_move = parseInt($('#image').css('height')) / 2;
        $('#image').css({
            position: 'relative',
            top: '50%',
            marginTop: '-' + top_move + 'px',
        }); 
        $('#image').fadeIn(1000, function(){                
            $('#image').css({
                height:'128px',
                width:'128px',
                display:'block'
            });         
        });     
    }
    </script>
</html>
于 2012-08-22T15:44:59.923 に答える
0

これを試して

最初に、要素に複数の #image がないことを確認してください

function correctMe(){
    var top_move = parseInt($('#image').css('height')) / 2;

    $('#image').css("position" : 'relative');
    $('#image').css("top" : 'relative');
    $('#image').css("marginTop" : '-'+top_move.toString()+'px');

    $('#image').fadeIn(100);
}
于 2012-08-22T14:32:25.360 に答える