PROMULGATOR

    a板凳

    湖北省武汉市
    Html
    Css
    Js
1
2
3
4
5
6
<ul>
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
    <li class="slider"></li>
</ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 ul {
    font-size:0;
    padding:0;
    position:relative;
    width:480px;
    margin:40px auto;
    user-select:none;
}
li {
    display:inline-block;
    width:160px;
    height:60px;
    background:#E95546;
    font-size:16px;
    text-align:center;
    line-height:60px;
    color:#fff;
    text-transform:uppercase;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
.slider {
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    height:4px;
    background:#4FC2E5;
    transition:all 0.5s;
}
.ripple {
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
    position:absolute;
    opacity:1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(function() {
    $("ul li").click(function(e) {
        if ($(this).hasClass('slider')) {
            return;
        }
        var whatTab = $(this).index();
        var howFar = 160 * whatTab;
        $(".slider").css({
            left: howFar + "px"
        });
        $(".ripple").remove();
        var posX = $(this).offset().left,
            posY = $(this).offset().top,
            buttonWidth = $(this).width(),
            buttonHeight = $(this).height();
        $(this).append("<span class='ripple'></span>");
        if (buttonWidth >= buttonHeight) {
            buttonHeight = buttonWidth;
        } else {
            buttonWidth = buttonHeight;
        }
        var x = e.pageX - posX - buttonWidth / 2;
        var y = e.pageY - posY - buttonHeight / 2;
        $(".ripple").css({
            width: buttonWidth,
            height: buttonHeight,
            top: y + 'px',
            left: x + 'px'
        }).addClass("rippleEffect");
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

jqTab切换水波动画

更新时间：2020-04-22 20:42:11

0