relative和absolute

relative和absolute 结合使用后 absolute会根据relative来定位，也就是父子类的关系，absolute首先会去寻找relative ，没有则默认为固定在页面给固定位置。

今天为了实现点赞效果做了实例，由于没有在class中给定ralative ,执行结果一直都是在第一个位置重复，反复查阅发现问题，源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>
<div class="item">
    <a onclick="Favor(this);">赞1</a>
    <!--    <span onclick="Favor(this)">+1</span>-->
</div>
<div class="item">
    <a onclick="Favor(this);">赞2</a>
</div>
<div class="item">
    <a onclick="Favor(this);">赞3</a>
</div>

<div class="item">
    <a onclick="Favor(this);">赞4</a>
</div>

<script>
    function Favor(thi) {
        console.log(thi);
        var top = 59;
        var left = 77;
        var opacity = 1;
        var fontSize = 18;

        //在对应位置创建span标签
        var tag = document.createElement('span');
        tag.innerText = '+1';
        //这里的absolute配合着前面的item中relative,切记这两者是配合使用的
        tag.style.position = "absolute";
        tag.style.top = top + 'px';
        tag.style.left = left + 'px';
        tag.style.opacity = opacity;
        tag.style.fontSize = fontSize + 'px';
        thi.appendChild(tag);

        //利用定时器设置动态效果
        var interval = setInterval(function () {
            top -= 10;
            left += 10;
            fontSize += 5;
            opacity -= 0.1;
            tag.style.top = top + 'px';
            tag.style.left = left + 'px';
            tag.style.opacity = opacity;
            tag.style.fontSize = fontSize + 'px';
            //判断动态效果程度，这里是根据透明度opacity来做的
            if (opacity <= 0.2) {
                //满足透明度小于等于0.2时，移除定时器
                clearInterval(interval)
                //移除建立的span标签
                thi.removeChild(tag)
            }


        }, 50)


    }
</script>

</body>
</html>

 

posted @ 2020-05-15 15:56  许诺1994  阅读(119)  评论(0)    收藏  举报