jquery四叶草(原创)

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

30495 373 查看评论 (14)

分享到微信朋友圈

查看演示立即下载

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

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

移动端日期选择插件rolldate

jQuery分页插件pagination.build.js

首页大屏背景图平滑切换

背景

39636 389

JavriptDesktop

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

背景

65365 506

jQuery颜色选择器ColorPicker

ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。

背景

72622 335

全屏背景滚动

基于HTML5的炫酷个人网站模板

背景

77344 1079

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