jquery四叶草(原创)

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

30657 373 查看评论 (14)

分享到微信朋友圈

查看演示立即下载

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

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

移动端日期选择插件rolldate

jQuery分页插件pagination.build.js

漂亮的全屏Slideshow幻灯滑块效果(jQuery)

背景

42615 419

jquery固定标题控制插件Midnight.js

midnight.js是在页面滚动时控制多标题设计的开关jQuery插件，所以对应下面的内容你总能看到一个标题。

背景

42518 533

基于canvas的星空效果

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

背景

72845 405

超简单的背景循环插件JoynBackground

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

背景

60288 636

讨论这个项目（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>