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

如果我理解这一点，问题是图像没有正确淡入，其余工作正常。这也是我在您提供的站点链接上观察到的。你没有淡入的原因是因为图像没有隐藏。您必须先使用 css 或 js 隐藏图像才能使其淡入...

另外，我不明白你为什么通过 jquery 设置一些静态属性。为什么不在你的样式表中声明它们呢？我只会使用 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

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

尝试这个

首先确保元素没有多个#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 回答