定位的div环形/圆形排列

最新推荐文章于 2025-04-17 17:31:13 发布

原创最新推荐文章于 2025-04-17 17:31:13 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

angularJS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的支付方式布局设计，包括微信、支付宝等支付手段的UI分布算法。通过数学计算调整每个支付选项的位置，使得整体布局美观且易于用户选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


            <div class="modepayment-content">
                <div class="modepayment-wx">微信</div>
                <div class="modepayment-zfb">支付宝</div>
                <div class="modepayment-xj">现金</div>
                <div class="modepayment-hyk">会员卡</div>
                <div class="modepayment-yl">银联</div>
                <div class="modepayment-hh">混合</div>
                <div class="modepayment-gd">更多</div>
            </div>

$(function(){
        var radius =300;
        var avd = 210/$(".modepayment-content div").length;
        var ahd = avd*Math.PI/180;
       $(".modepayment-content").css({"left":0,"top":200});
        $(".modepayment-content div").each(function(index, element){
            $(this).css({"bottom":Math.sin((ahd*index))*radius,"right":Math.cos((ahd*index))*radius+405});
        });
    })