评论:常见鼠标经过div边框动画  [查看原文]

所属分类:UI,其他-悬停,动画效果

 49421  915  50
当前第1页 / 共2页
    童遥0
    2023/5/21 11:00:03
    很好用 感谢po主
    回复
    junyi5d0
    2019/7/23 16:01:32
    最好还是用CSS3写吧。。 回复
    指尖微凉的星光0
    2019/5/9 16:57:06
    为啥我啥效果都没看到 回复
    栀子0
    2019/1/11 11:57:52
    bug太多了,this指向有问题,鼠标移动上去边框还没展示完,动画结束了,一脸懵逼。
    回复
    Young battlefield。0
    2018/10/9 9:55:19
    986217527@qq.com跪求大佬发一份 回复
    予我心安°0
    2018/9/20 10:43:05
    兄弟,引入后比较卡,没法正常使用。
        microsoftvs0
        2018/9/20 11:47:32
        我这里一点都不卡
    回复
    周为止0
    2018/6/11 14:34:11
    360没有效果呀,有办法兼容吗项目最后一步了 在线等
        总督sir0
        2018/6/18 20:13:54
        应该会有的呀
    回复
    "白"色禁药0
    2018/5/21 23:10:45
    Prince1
    2018/4/20 15:21:42

    兄弟 有一个很大的bug  你这个this指针指向不明确啊 多个同名类调用你这个方法就炸掉了  还有最好是innerWidth 和 innerHeight  改了其中一个

    function num3() {
        // top边框
        var divTop = "<div style='" + becurr + "top:-2px;left:-2px;width:0px;height:2px' class='divTop'></div>";
    
        // right边框
        var divRight = "<div style='" + becurr + "top:-2px;right:-2px;width:2px;height:0px;' class='divRight'></div>";
    
        // Bottom边框
        var divBottom = "<div style='" + becurr + "bottom:-2px;right:-2px;width:0px;height:2px' class='divBottom'></div>";
    
        // Left边框
        var divLeft = "<div style='" + becurr + "bottom:-2px;left:-2px;width:2px;height:0px;' class='divLeft'></div>";
        _this.hover(function() {
            var n1 = $(this).innerWidth();
            var h1 = $(this).innerHeight();
            var el = $(this)
            el.append(divTop, divRight, divBottom, divLeft);
            var itTopBottom = $(this).find('.divTop,.divBottom'),
                itRightLeft = $(this).find('.divLeft,.divRight');
            itTopBottom.stop().show().animate({
                width: n1 + 3.5
            }, options.speed);
            itRightLeft.stop().show().animate({
                height: h1 + 3.5
            }, options.speed);
        }, function() {
            var itTopBottom = $(this).find('.divTop,.divBottom'),
                itRightLeft = $(this).find('.divLeft,.divRight');
            itTopBottom.stop().show().animate({
                width: 0
            }, options.speed);
            itRightLeft.stop().show().animate({
                height: 0
            }, options.speed, function() {
                itTopBottom.remove();
                itRightLeft.remove();
            });
        })
    }
    回复
    哈哈哈0
    2018/4/16 16:12:11
    跪求一份(1720726984@qq.com)。多谢各位大佬 回复
    Haruharu0
    2018/3/19 10:16:58
    IE咋没效果,然后用谷歌又有 有BUG 回复
    you0
    2018/3/1 9:30:14
    能发多一分给我吗,谢谢! 回复
    空手套白狼0
    2018/1/31 16:35:59

    求大佬送一份1040182139@qq.com

    回复
    ?木鱼咸菜0
    2018/1/15 15:19:51

    num4 有BUG

        南极熊0
        2018/2/2 17:02:19
        刚想说的,被你说了
    回复
    0
    2018/1/12 10:42:38

    1014056301@qq.com,麻烦大哥发一份了,谢谢

    回复

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

取消回复