前端 - 仿动态效果 - 展开信息图标

——来自爱编程爱探索的小5

<div id="top" style="width:300px;height:100px;border:1px solid #ccc;margin:0 auto;overflow:hidden;position:relative;margin-bottom:50px;">
    <div style="width:100%;height:200px;border:1px solid #ccc;background:#e3e3e3;">
        <div style="width:100%;height:100px;border:1px solid #ccc;background:#099dff;">

        </div>
        <div style="width:100%;height:100px;border:1px solid #ccc;background:##055dff;">

        </div>
    </div>

    <div id="arrowparent" style="cursor:pointer;position:absolute;left:50%;bottom:-18px;margin-left:-25px;width:50px;height:50px;font-size:30px;color:#fff;background:rgba(0,0,0,0.5);border:1px solid #fff;border-radius:50px;text-align:center;">
        <span id="arrow" style="position:absolute;top:-5px;left:18px;">v</span>
    </div>
</div>
<script type="text/javascript">

    //箭头动态
    var timeobj = null;
    var timeunit = 100;
    var _top = 5;

    //movearrow();
    function movearrow() {

        if (_top == 5) {

            clearInterval(time);
            $("#arrow").animate({ top: 5 + "px" }, 1000);
            _top = -5;
            time = setInterval(movearrow, timeunit);
        }
        else {

            clearInterval(time);
            $("#arrow").animate({ top: -5 + "px" }, 1000);
            _top = 5;
            time = setInterval(movearrow, timeunit);
        }
    }

    time = setInterval(movearrow, 100);

    //展开
    $("#arrowparent").click(function () {
        $("#top").css("height", "200px");
    });
</script>

 

 

【一句话一感想一心情】版本更新，增加测颜值推荐图文，来体验下句子的魅力