如何在jQuery定位后显示图像

时间:2012-08-22 14:25:55

标签: jquery html css

脚本是:

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 个答案:

答案 0 :(得分:2)

而不是display: none尝试使用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&lt; 9中不起作用。

答案 1 :(得分: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>

似乎是为我做的。

答案 2 :(得分: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);
}

答案 3 :(得分: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;    
}

答案 4 :(得分: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>