一个常用的效果，点击div让下面的小三角移动到对应的div

最新推荐文章于 2022-10-09 22:11:18 发布

就这么开心

最新推荐文章于 2022-10-09 22:11:18 发布

阅读量732

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43478869/article/details/84792165

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用css写一个常用的效果点击div让下面移动到对应div下

js主要是让点击div下面移动距离

<script>
        
        var box1 = document.getElementById("box1"); //获取点击按钮
        var box2 = document.getElementById("box2"); //获取点击按钮
        var box3 = document.getElementById("box3"); //获取点击按钮
        var cll = document.getElementById("cll");//获取要移动的div
        box1.onclick = function() {
            cll.style.left = "752px"
        }
        box2.onclick = function() {
            cll.style.left = "952px"
        }
        box3.onclick = function() {
            cll.style.left = "1152px"
        }
    </script>

HTML也附上

<div id="box">
        <div id="box1">公司</div>
        <div id="box2">家</div>
        <div id="box3">夏日酒店</div>
    </div>
    <div id="solid">
        <div id="cll"></div>
    </div>

css的div就不写自己随便设置一下（不过想要让#cll居中要和你设置div的宽度调整点击移动的位置）还有就是这个要使用定位

#solid {
        
        margin-top: -195px;
        background-color: #fff;
        position: relative;
        border-top: 2px solid lightblue;
    }
    #cll {
        position: absolute;
        height: 20px;
        width: 20px;
        left: 552px;
        top: -12px;
        background: #fff;
        border-top: 2px solid lightblue;
        border-left: 2px solid lightblue;
        transform: rotate(45deg);
        transition: all .3s linear 0s;
    }