<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>marginTop</title>
<style type="text/css">
#con {
width:300px;
height:300px;
border:solid 1px #F00;
overflow:hidden;
}
#conc img {
width:300px;
height:300px;
}
#show {
width:300px;
height:200px;
border:solid 1px #00f;
}
</style>
<script type="text/javascript" src="js/jquery1.6.1.js"></script>
<script type="text/javascript">
$(function() {
var num = 0;
var html = '';
//setInterval(function() {
$('#conc img').animate({
//marginTop : '-=' + $('#con').height()
marginTop : -500
} , 1500 , function() {
html += '计时:' + num++ + '<br>';
html += "$(this).css('marginTop') = " + $(this).css('marginTop');
$('#show').html(html);
html = '';
});
//} , 3000);
});
</script>
</head>
<body>
<div id="con">
<div id="conc">
<img src="images/img/1.jpg" />
</div>
</div>
<div id="show"></div>
</body>
</html>
以上代码,实现的是,将图片的marginTop改变,而实现图片滑动的特效动画。
在设置marginTop为‘-’时,图片将向上滑动。
容器的高度为300px,下图为将marginTop设置为容器两倍高度时显示的效果,
图片中看到,此时的图片又回到了容器初始位置,仿佛没有动过,但是在运行中,其动画现象是如此的,图片先向上滑动到全部看不到,然后图片再下滑,到与底边容器相齐。
再将marginTop更改为 -500,得到下图
不断改变其值,得出的结果是,在FF下,animate的动画marginTop当其内内容向上移动,当移动到容器高度,即此例中的-300范围内时,内容是向上移动的,当大于容器高度,即为此例的-500,-600,则将会先上移300,然后再下移200,,300的高度。
将上述代码中的注释去掉,将margiTop值设置小一些,进行循环,可更详细看出其具体现象。
2012、10.、11
在论坛上提问http://topic.csdn.net/u/20121010/18/91ad7c4f-5c0f-43f4-a851-0801e29a0530.html
showbo给了一个很好的回答,并给了一个详细解决办法的链接firefox块级盒模型相邻的垂直margin会被折叠的问题
我看了一下链接内容,感觉非常的使用,所以就果断的转载了http://blog.csdn.net/qinglinglaoren/article/details/8058888
希望各位也能仔细了解一下这样一个现象。