内容概述
本例子是实现一个js位移动画的功能,在初始情况下,浏览器的左边只显示索引两个字,当鼠标滑过索引时,通过改变父结点的left属性,显示content
1.首先我们需要用一个class= 'container'的div作为父结点,通过改变他的left值来达到位移动画的效果
2.接下来我们需要在container中添加两个div一个表示content(内容),一个表示index(索引)
3.将content和index水平排列有两种实现方法,分别是使用float属性或者display:inline-block
4.对于使用display:inline-block,如果不设置container的font-size:0px会发现content和index之间会有空隙,原因是当我们在输入div的结束标签之后敲击了回车,而html会因为这个回车符使两个div之间产生间隙.
**最后总结一下学到的知识点:**1)偏移量left,top两个属性必须在position为relative或者absolute时才能生效(absolute脱离了文档流,relative不会影响它之后的节点,所以一般情况下应该使用margin-left).
2)display:inline-block属性的意义,既满足了可以设置高度的块级元素特性,又满足了行内排列的效果
3)如何消除使用display:inline-block时产生的div之间的间隙(将其父结点的font-size设为0)
4)如何实现div在相对与父结点居中(以垂直居中为例,首先将top设为50%然后将margin-top设为负的自身高度的一半,例如div高度为60px,
那么margin-top值应该为-30px即可实现垂直居中.水平居中亦如此.那么top和margin-top的值是否可以互换呢?答案是不可以的,因为如果给margin-top一个百分比值,会发现它是相对与父元素的宽度来讲的,至于为什么是相对与父级元素的宽度,将在文章末尾详细解释.)5)对于文字水平方向居中可以使用text-align:center,对于单行文字的竖直方向居中可以将line-height设为div高度即可
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
/*设置div的左偏移量 当position 属性为static时无效*/
position: relative;
left: -200px;
}
.container {
/*当其后代div结点使用display:inline-block属性时,
* 在body中输入<div></div>结点后敲了回车就会使后代div之间有默认4px的间隔,
* 为了消除间隔可以将其父结点的字体大小设为0消除*/
font-size: 0;
}
.content {
width: 200px;
height: 200px;
display: inline-block;
/*既满足了可以设置高度的块级元素特性,又满足了行内排列的效果*/
background-color: #BBB;
}
.index {
/*实现div的竖直方向的居中*/
position: absolute;
width: 30px;
top: 50%;
margin-top: -30px;
height: 60px;
display: inline-block;
background-color: #00FF00;
}
.index {
/*实现div中文字居中*/
font-size: 14px;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container" id="container">
<!--最外层容器,用来绝对定位-->
<div class="content"></div>
<div class="index">索引</div>
</div>
</body>
<script type="application/javascript">
var timer = null;
window.onload = function() {
var container = document.getElementById('container');
container.onmouseover = function() {
startMove(0);
}
container.onmouseout = function() {
startMove(-200);
}
}
function startMove(targrt) {
clearInterval(timer); //防止多次触发事件,引起速度变快
timer = setInterval(function() {/*开启interval,每隔20秒执行一次*/
if (container.offsetLeft == targrt) {/*检查left是否到达了目标值,如果到达了目标值则结束interval*/
clearInterval(timer);
} else {
var speed = 10;
if (targrt < container.offsetLeft) {
speed = -10;
}
container.style.left = container.offsetLeft + speed + "px";
}
}, 20);
}
</script>
</html>最后关于margin-top
对于4.4中margin-top设置为百分比,相对值为父级宽度而不是高度的说明:
1.如果用height来计算，百分比*容器高度=padding-top（假设这是A等式），但是容器的高度=内容高度+padding-top（B等式），
如果A成立能得到 padding-top， padding-top又影响到B等式，但B等式又是A等式的条件，用开发人员的说法是死循环.
2.一般情况下html是横向排版的,要构建在纵横两个方向上相同的 margin/padding。如果两个百分比的相对方式不同，那用百分比就无法得到垂直和水平一致的留白。
随时随地看视频
