jquery四叶草(原创)

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

 14408  141  查看评论 (13)
分享到微信朋友圈
X
jquery四叶草(原创) ie兼容11

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

相关插件-背景,动画效果

京东产品详细页图片放大效果

京东商城详细页产品图片列表以及放大镜效果 兼容ie6+,谷歌,火狐
  背景
 32497  277

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

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

jQuery全屏背景插件Vegas2

网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显示。
  背景
 24321  254

超简单的背景循环插件JoynBackground

使用超简单,代码仅1句,改变参数就可以了。
  背景
 35567  374

讨论这个项目(13)回答他人问题或分享插件使用方法奖励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>
    回复
    王思捷 0
    2018/11/26 4:09:12
    前端小白想问下jquery怎么分行啊 回复
    华虹唐戈 0
    2018/11/2 16:22:40
    是js控制的吗
        . 侦??0
        2018/11/6 9:12:11
        jquery
    回复
    PeterChu 0
    2018/8/30 10:41:37
    nice
        . 侦??0
        2018/8/30 11:58:25
        注释很全,能学会的
        huangdetian0
        2018/9/13 13:36:29
        很难玩
        -初笑°0
        2019/4/22 8:52:46
        慢慢看呗 会理解的
    回复
    茶哥儿 0
    2018/8/29 20:42:09
    非常棒!
        . 侦??0
        2018/9/1 10:56:55
        ??
        4053185450
        2018/9/5 17:01:42
        ???
    回复
取消回复