评论：jquery四叶草(原创) [查看原文]

所属分类：UI,其他-背景,动画效果

32281 374 14

当前第1页 / 共1页

Thinkbird0

2019/6/9 20:59:10

年0

2019/5/26 21:08:58

曲终人散1

2018/12/18 16:42:35

个人感觉可以简化下代码

<main>
    <div class="one" data-name="one" data-bgcolor="rgba(247, 114, 114, 0.986)">医疗</div>
    <div class="two" data-name="two" data-bgcolor="rgb(245, 245, 129)">饮食</div>
    <div class="three" data-name="three" data-bgcolor="rgb(193, 245, 115)">运动</div>
    <div class="four" data-name="four" data-bgcolor="rgb(133, 219, 245)">消费</div>
</main>

<script type="text/javascript">
    (function($) {
        $.fn.gress = function() {
            var gName = $(this).data("name");
            var bgColor = $(this).data("bgcolor");
            $(this).bind("click", function() {
                if ($(this).attr("class") == gName) {
                    $(this).attr("class", gName + "s");
                    $('body').css({
                        background: bgColor
                    })
                } else {
                    $(this).attr("class", gName);
                    $('body').css({
                        background: 'none'
                    })
                }
            })
        }
    })(jQuery);
    $(".one").gress();
    $(".two").gress();
    $(".three").gress();
    $(".four").gress();
</script>