jquery四叶草(原创)

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

29537 371 查看评论 (14)

分享到微信朋友圈

查看演示立即下载

插件描述：css样式加jquery方法调用，代码注释非常全

直接把代码粘贴到代码中，确定class名不冲突，并加以定位就可以自由使用。
点击叶片，改变形状，改变背景颜色

移动端日期选择插件rolldate

jQuery分页插件pagination.build.js

jQuery动态改变文字和背景颜色效果

背景

48376 373

JavriptDesktop

一个漂亮的原生Javript桌面效果

背景

64178 506

超简单的背景循环插件JoynBackground

使用超简单，代码仅1句，改变参数就可以了。

背景

58865 635

基于canvas的星空效果

基于canvas的星空粒子效果（代码注释全！）

背景

71364 404

讨论这个项目（14）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

Thinkbird 0

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>