使用jQuery和jQuery UI touch插件实现的滑块拖拉切换按钮

很不错的开关按钮渐变交互动效

jquery, button, toggle, switch, 界面组件

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3406
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(".slider .drag").draggable({
    axis: 'x',
    containment: 'parent',
    drag: function(e, ui) {
        var slider = $(this).parent();
        var toggleHover = (slider.hasClass('enabled')) ? (ui.position.left <= $(this).outerWidth()) : (ui.position.left >= (slider.outerWidth() - $(this).outerWidth() * 2));
        slider.addClass('active');
        slider.toggleClass('hover', toggleHover);
    },
    stop: function(e, ui) {
        var slider = $(this).parent();
        if (slider.hasClass('enabled')) {
            if (ui.position.left > $(this).outerWidth()) {
                $(this).animate({
                    left: (slider.outerWidth() - $(this).outerWidth())
                });
                slider.removeClass('hover');
                slider.removeClass('active');
            } else {
                $(this).animate({
                    left: 0
                });
                slider.removeClass();
                slider.children('span').text('Enable');
                $('.result').text('false').removeClass('true');
            }
        } else {
            if (ui.position.left < (slider.outerWidth() - $(this).outerWidth() * 2)) {
                $(this).animate({
                    left: 0
                });
                slider.removeClass('hover');
                slider.removeClass('active');
            } else {
                $(this).animate({
                    left: (slider.outerWidth() - $(this).outerWidth())
                });
                slider.removeClass().addClass('enabled');
                slider.children('span').text('Disable');
                $('.result').text('true').addClass('true');
            }
        }
    }
});

编译

CSS

.slider {
    display: table;
    padding: 6px 8px;
    background: #5628EE;
    border-radius: 6px;
}
.slider > div {
    height: 30px;
    position: relative;
    text-align: center;
    width: 136px;
}
.slider > div span {
    display: block;
    color: #fff;
    line-height: 30px;
    font-size: 16px;
    font-weight: 500;
    transition: all .3s ease;
}
.slider > div .drag {
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.7);
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    transition: background .3s ease;
    border-radius: 50%;
}
.slider > div .drag svg {
    fill: #fff;
    stroke: none;
    display: block;
    width: 5px;
    height: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all .3s ease;
    -webkit-transform: translate(-45%, -50%);
    transform: translate(-45%, -50%);
}
.slider > div .drag:active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    background: rgba(255, 255, 255, 0.3);
}
.slider > div .drag:hover {
    background: rgba(255, 255, 255, 0.2);
}
.slider > div .drop {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    right: 0;
    top: 0;
    transition: all .3s ease;
    border-radius: 50%;
}
.slider > div .drop .wave {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all .3s ease;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.slider > div.active span {
    color: rgba(255, 255, 255, 0.2);
}
.slider > div.active .drop {
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.slider > div.active .drop .wave {
    background: rgba(255, 255, 255, 0.4);
}
.slider > div.hover .drop .wave {
    background: rgba(255, 255, 255, 0.4);
    -webkit-transform: translate(-50%, -50%) scale(1.7);
    transform: translate(-50%, -50%) scale(1.7);
}
.slider > div.enabled .drop {
    right: 100%;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.slider > div.enabled .drag svg {
    -webkit-transform: translate(-60%, -50%) scaleX(-1);
    transform: translate(-60%, -50%) scaleX(-1);
}
.result {
    display: table;
    text-align: center;
    font-style: italic;
    color: #6C7486;
    font-size: 14px;
    margin: 20px auto 0 auto;
    transition: color .3s ease;
}
.result.true {
    color: #99A3BA;
}
html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
* {
    box-sizing: inherit;
}
*:before,
*:after {
    box-sizing: inherit;
}
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    background: #2F3545;
    display: flex;
    justify-content: center;
    align-items: center;
}
body .dribbble {
    position: fixed;
    display: block;
    right: 20px;
    bottom: 20px;
}
body .dribbble img {
    display: block;
    height: 24px;
}

HTML

很不错的开关按钮渐变交互动效

jquery, button, toggle, switch, 界面组件

编辑器支持Emmet

快捷键

很不错的开关按钮渐变交互动效

jquery, button, toggle, switch, 界面组件

使用jQuery-qrcode插件实现的在线二维码生成器

使用jQuery Masonry插件实现的作品展示瀑布流模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：