<!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
希望各位也能仔细了解一下这样一个现象。
分享到:
相关推荐
jquery animate网站banner动画效果是一款基于jquery css3 animate属性制作的网站banner动画演示效果代码。
jquery实例超炫animate动画效果 demo是原版,效果还是相当炫丽 后面自制了两个
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery Animate Menu带动画博客网站导航菜单,非常适合博客网站使用的网站菜单,鼠标放到菜单上,菜单由下至上出现,用到了一幅图片,Jquery控制图片生成动画效果,具有鼠标悬停特效的菜单特效。
jQuery animate事件卷轴打开动画效果
jquery animate() 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如"height"、"top"或"opacity")。 注意:所有指定的属性必须用...
jquery animate小用例,jquery animate小用例
jquery数字跳动插件Animate Number是一款增加了数属性和阶跃函数的jQuery动画功能特性。
jQuery+animate.css自定义弹窗动画插件,带有多种弹窗方式,具体看下方说明。
jQuery第3天知识点:jQuery 属性操作、jQuery三组基本动画、自定义动画animate.zip
jquery animate分页标签按钮鼠标悬停滑动展开分页按钮 jquery animate分页标签按钮鼠标悬停滑动展开分页按钮
jquery-animateNumber 数字动画插件 提供js和css文件,需求可以直接下载下来使用
jquery支持animate.css动画的弹出层插件jquery.popup.js.zip
脚本简介jquery animate分页按钮是一款鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩。
如下所示: function fingers(){ $(.box01 .fingers).animate({width:7.5rem,marginLeft:-3.75rem},500,function(){ $(.box01 .fingers).animate...以上这篇jquery animate动画持续运动的实例就是小编分享给大家的全
jqueryanimate图片无缝滑动javascript网页特效,轮播广告,无缝轮播,精简代码,一看就懂
jquery animate网站banner动画效果是一款基于jquery+css3+animate属性制作的网站banner动画演示效果代码。
jquery中的动画,可产生div在页面中的移动动画,同时div内的文本也可以完成放大的效果