Bootstrap 用于分步演示的移动触摸滑块栏

Bootstrap Slider for Disclosure。本例为移动版本，需要支持触摸（或使用Chrome模拟触摸）

touch

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.main-container {
    position: relative;
    background: url("http://dankemper.net/cpr/images/cpr-press-motion-figures-with-callouts-master.png") no-repeat top left;
    top: calc(50% - 300px);
    left: calc(50% - 300px);
    width: 600px;
    height: 420px;
}
div[class^="callout"] {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
    width: 600px;
    height: 420px;
    opacity: 0;
}
.callout-one {
    background: url("http://dankemper.net/cpr/images/cpr-press-motion-figures-with-callouts-1.png") no-repeat top left;
}
.callout-two {
    background: url("http://dankemper.net/cpr/images/cpr-press-motion-figures-with-callouts-2.png") no-repeat top left;
}
.callout-three {
    background: url("http://dankemper.net/cpr/images/cpr-press-motion-figures-with-callouts-3.png") no-repeat top left;
}
.callout-four {
    background: url("http://dankemper.net/cpr/images/cpr-press-motion-figures-with-callouts-4.png") no-repeat top left;
}
.slider-container {
    margin: 0 auto;
    text-align: center;
    width: 80%;
}

HTML

<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css'>
<div class="main-container">
    <div class="callout-one"></div>
    <div class="callout-two"></div>
    <div class="callout-three"></div>
    <div class="callout-four"></div>
</div>
<div class="slider-container">
    <input id="ex13" type="text" style="width: 600px;" />
</div>
<script src='/assets/common/stopExecutionOnTimeout.js'></script>
<script src='https://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js'></script>
<script>
var sliderChanged = function (changeObj) {
    var selector = 0;
    var callouts = [
        '.callout-one',
        '.callout-two',
        '.callout-three',
        '.callout-four'
    ];
    var newVal = changeObj.value.newValue;
    var modulus = newVal % 100;
    var opacity = modulus >= 87 || modulus == 0 ? 1 : modulus / 100;
    if (newVal == 0) {
        opacity = 0;
    }
    if (newVal > 0 && newVal <= 100) {
        selector = 0;
    } else if (newVal > 100 && newVal <= 200) {
        selector = 1;
    } else if (newVal > 200 && newVal <= 300) {
        selector = 2;
    } else if (newVal > 300 && newVal <= 400) {
        selector = 3;
    }
    $(callouts[selector]).css({
        'display': 'block',
        'opacity': opacity
    });
    for (var c = 0; c < selector; c++) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        $(callouts[c]).css({
            'display': 'block',
            'opacity': 1
        });
    }
    window.CP.exitedLoop(1);
    for (var i = selector + 1; i < callouts.length; i++) {
        $(callouts[i]).fadeOut('fast');
    }
};
$('#ex13').slider({
    ticks: [
        0,
        100,
        200,
        300,
        400
    ],
    ticks_labels: [
        'Ready',
        'Head Tilt',
        'Chin Lift',
        'Legs',
        'Chest'
    ],
    ticks_snap_bounds: 12,
    tooltip: 'hide',
    value: 0
}).change(sliderChanged);
</script>

Bootstrap Slider for Disclosure。本例为移动版本，需要支持触摸（或使用Chrome模拟触摸）

touch

编辑器支持Emmet

快捷键

Bootstrap Slider for Disclosure。本例为移动版本，需要支持触摸（或使用Chrome模拟触摸）

touch

基于GSAP实现的全屏水平方向幻灯片（支持鼠标拖拉、左右方向箭、底部导航圆点、触摸滑动）

使用Swiper.js实现响应式图文卡片滑动幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：