首页手记 JavaScript动画-----位移动画

JavaScript动画-----位移动画

标签：

Html/CSS JavaScript

内容概述
本例子是实现一个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。如果两个百分比的相对方式不同，那用百分比就无法得到垂直和水平一致的留白。

点击查看更多内容