拖拉型触发 | 解锁

拉动按钮到指定位置后触发相关程序，SLIDE TO UNLOCK。模拟手机上的拖拉解锁动画。

jQuery-UI, 界面组件

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* SLIDE TO UNLOCK */

$(function() {
    $("#unlock .drag").draggable({
        axis: 'x',
        containment: 'parent',
        drag: function(event, ui) {

$('#unlock .content .drop').addClass('active');

if (ui.position.left > 105) {

$('#unlock .content .drop').addClass('hover');

}

},
        stop: function(event, ui) {
            if (ui.position.left < 105) {
                $(this).animate({
                    left: 0
                })
                $('#unlock .content .drop').removeClass('hover');
                $('#unlock .content .drop').removeClass('active');

} else {
                $(this).animate({
                    left: 0
                })
                $('#unlock .content .drop').removeClass('hover');
                $('#unlock .content .drop').removeClass('active');

// UNLOCK
                $('#unlock').addClass('unlock');
                $('#home').addClass('unlock');

}
        }
    });
});

/* END SLIDE TO UNLOCK */

$('.restart').click(function() {
    $('#unlock').removeClass('unlock');
    $('#home').removeClass('unlock');
})

编译

CSS

body,
html,
* {
    padding: 0px;
    margin: 0px;
}
body,
html {
    width: 100%;
    height: 100%;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    overflow: hidden;
    height: 300px;
    width: 300px;
    background-image: linear-gradient(136deg, #ff7a7a 0%, #ff7ab6 100%);
    position: absolute;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* ------ UNLOCK ------ */

#unlock {
    font-family: helvetica;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 186px;
    height: 73px;
    text-align: center;
    opacity: 1;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#unlock.unlock {
    opacity: 0;
    -webkit-transform: translate(-486px, -50%);
    -ms-transform: translate(-486px, -50%);
    -o-transform: translate(-486px, -50%);
    transform: translate(-486px, -50%);
}
#unlock .title {
    opacity: 0.5;
    color: #FFF;
    font-size: 11px;
}
#unlock .subtitle {
    color: #FFF;
    font-size: 16px;
}
#unlock .content {
    width: 186px;
    height: 40px;
    margin: auto;
    position: relative;
    text-align: center;
}
#unlock .content:after {
    content: 'drag';
    color: #FFF;
    font-size: 11px;
    font-family: f-gm;
    position: absolute;
    left: 50%;
    bottom: -5px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
#unlock .content .drag {
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #FFF;
    border-radius: 100px;
    position: absolute;
    z-index: 1;
    left: 0px;
    -webkit-transition: background-color .25s ease;
    -moz-transition: background-color .25s ease;
    -ms-transition: background-color .25s ease;
    -o-transition: background-color .25s ease;
    transition: background-color .25s ease;
}
#unlock .content .drag:active {
    cursor: ns-resize;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    background-color: rgba(255, 255, 255, 0.6);
}
#unlock .content .drag svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
    height: 10px;
    fill: #FFF;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#unlock .content .drag:active svg {
    fill: #FFF;
}
#unlock .content .dot {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 2px;
    height: 100%;
}
#unlock .content .dot:after {
    content: '';
    height: 1px;
    width: 1px;
    border-radius: 2px;
    background-color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#unlock .content .drop {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    position: absolute;
    right: 0px;
    top: 0px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#unlock .content .drop.active {
    border: 1px solid rgba(255, 255, 255, 0.5);
}
#unlock .content .drop.hover {
    border: 1px solid rgba(255, 255, 255, 0.5);
}
#unlock .content .drop .wave {
    width: 19px;
    height: 19px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#unlock .content .drop.active .wave {
    background-color: rgba(255, 255, 255, 0.5);
}
#unlock .content .drop.hover .wave {
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transform: translate(-50%, -50%) scale(1.7);
    -ms-transform: translate(-50%, -50%) scale(1.7);
    -o-transform: translate(-50%, -50%) scale(1.7);
    transform: translate(-50%, -50%) scale(1.7);
}
/* ------ END UNLOCK ------ */
/* HOME */

#home {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#home.unlock {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
}
.restart {
    font-family: helvetica;
    color: #FFF;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* END HOME */

HTML

<div class="title">Discover</div>
        <div class="subtitle">All Icons</div>

</div>

<div id="home">
        <div class="restart">Start again ? Click !</div>
    </div>

</div>
<script src="/libs/jquery/jquery-ui.min.js"></script>

拉动按钮到指定位置后触发相关程序，SLIDE TO UNLOCK。模拟手机上的拖拉解锁动画。

jQuery-UI, 界面组件

编辑器支持Emmet

快捷键

拉动按钮到指定位置后触发相关程序，SLIDE TO UNLOCK。模拟手机上的拖拉解锁动画。

jQuery-UI, 界面组件

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

CSS3 下拉式迷你购物车

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：