脚本是:
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;"/>
我的目标是:
我的代码不起作用。
答案 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)
你试过了吗?
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>