jQuery 海拔温度和氧气水平计算器

jQuery-ui-Slider-Pips 滑块插件，v1.7.0； https://github.com/simeydotme/jQuery-ui-Slider-Pips

slider

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

! function(a) {
    "use strict";
    var b = {
        pips: function(b) {
            function c(b) {
                var c = a(b).data("value"),
                    d = e.element;
                if (!0 === e.options.range) {
                    var f, g = d.slider("values");
                    f = g[0] === g[1] ? c < g[0] ? [c, g[1]] : [g[0], c] : Math.abs(g[0] - c) === Math.abs(g[1] - c) ? [c, c] : Math.abs(g[0] - c) < Math.abs(g[1] - c) ? [c, g[1]] : [g[0], c], d.slider("values", f), i.range(f)
                } else d.slider("value", c), i.single(c)
            }

$(".altitude-slider")

.slider({

max: 12000,
    min: 0,
    step: 100,
    orientation: "vertical",
    range: "max",
    value: 1000,

slide: function(e, ui) {

$(".altitude").val(ui.value).trigger("change");

}

})

.slider("pips", {

suffix: "m",
    step: 2

});

var app = {};

app.getPressure = function(altitude) {

altitude = altitude || 0;

return (((101325 * Math.pow((1 - ((2.25577 * Math.pow(10, -5)) * altitude)), 5.25588)) / 1000) * 0.00986923267).toFixed(3);

}

app.getOxygen = function(altitude) {

return Math.ceil(app.getPressure(altitude) * 100);

}

app.getTemperature = function(altitude, base) {

altitude = altitude || 0;
    base = (typeof base !== "number" && base !== NaN) ? 26 : base;

var temp = (base - (6.5 * (altitude / 1000)));
    temp = (temp < -56.5) ? -56.5 : temp;

return temp.toFixed(1);

}

app.getTempPercent = function(base, current, min) {

var diff = parseInt(base) - min;
    var one = parseInt(diff) / 100;
    var test = parseInt(current) + parseInt(-min);

return test / one;

}

$("input").on("change", function() {

var alt = parseFloat($(".altitude").val());
    var base = parseFloat($(".baseTemp").val());

if (alt > 12000) {
        alt = 12000;
        $(".altitude").val(alt);
    }

var temp = app.getTemperature(alt, base);
    var minTemp = app.getTemperature(12000, base);
    var tempPerc = app.getTempPercent(base, temp, minTemp);
    var oxygen = app.getOxygen(alt);
    var pressure = app.getPressure(alt);

$("table .atm").html("~ " + pressure + " atm");
    $("table .oxygen").html("~ " + oxygen + " %");
    $("table .ambient").html("~ " + temp + " °c");

$(".bar.temperature .inner")
        .css("height", tempPerc + "%")
        .attr("data-value", temp + "°c");

$(".bar.oxygen .inner")
        .css("height", oxygen + "%")
        .attr("data-value", oxygen + "%");

$(".altitude-slider").slider("value", alt);

}).trigger("change");

编译

CSS

h1,
h2 {
    text-align: left;
    line-height: 1;
}
h1 {
    font-size: 2em;
    font-weight: 800;
}
h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 1em;
}
.bar {
    border: 1px solid #222;
    width: 60px;
    height: 300px;
    left: 17px;
    background-color: #222;
}
.bar,
.bar .inner {
    position: absolute;
    border-radius: 0;
}
.bar .inner {
    width: 58px;
    height: 298px;
    -webkit-transition: 0.5s ease-out all;
    transition: 0.5s ease-out all;
}
.bar.oxygen {
    left: 76px;
    width: 18px;
    border-radius: 0 2px 2px 0;
}
.bar.oxygen .inner {
    bottom: 0;
    background: url("http://files.simey.me/blood.jpg");
    background-position: -19px bottom;
    width: 16px;
}
.bar.temperature {
    left: 0;
    width: 18px;
    border-radius: 2px 0 0 3px;
}
.bar.temperature .inner {
    bottom: 0;
    background: url("http://files.simey.me/temp.jpg");
    background-position: -19px bottom;
    width: 16px;
}
.bar.oxygen .inner,
.bar.temperature .inner {
    border-top: 1px solid white;
}
.bar.oxygen .inner:after,
.bar.temperature .inner:after {
    content: attr(data-value);
    position: absolute;
    height: 20px;
    width: 100px;
    top: -10px;
    left: 25px;
    font-size: 12px;
}
.bar.temperature .inner:after {
    left: -110px;
    text-align: right;
}
.bar.mountain {
    background: url("http://files.simey.me/mountain.jpg");
    background-position: -14px 52px;
    background-size: 86px 246px;
    background-repeat: no-repeat;
    background-color: #688ab0;
}
table .atm,
table .oxygen,
table .ambient {
    font-weight: 600;
}
.altitude-slider {
    height: 298px;
    top: 1px;
    width: 60px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.altitude-slider .ui-slider-handle,
.altitude-slider .ui-slider-range {
    width: 58px;
    left: 3px;
    height: 2px;
    background: red;
    border: none;
    margin-bottom: 0;
    border-radius: 0;
    outline: none;
}
.altitude-slider .ui-slider-handle {
    margin-bottom: -1px;
}
.altitude-slider .ui-slider-range {
    background: rgba(255, 255, 255, 0.6);
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
    opacity: 0.3;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip.ui-slider-pip-last {
    opacity: 1;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
    margin-top: -15px;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip.ui-slider-pip-first {
    opacity: 1;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    margin-top: 3px;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip:nth-child(5n+3) {
    opacity: 1;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip:nth-child(5n+3) .ui-slider-line:before,
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip:nth-child(5n+3) .ui-slider-line:after {
    width: 5px;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip .ui-slider-line {
    left: 3px;
    width: 58px;
    background: rgba(0, 0, 0, 0.1);
    margin-top: -1px;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip .ui-slider-line:before,
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip .ui-slider-line:after {
    content: "";
    position: absolute;
    left: 0;
    width: 3px;
    height: 1px;
    background: black;
}
.altitude-slider.ui-slider-vertical.ui-slider-pips .ui-slider-pip .ui-slider-line:after {
    left: auto;
    right: 0;
}
body {
    color: #444;
    font-family: "Roboto";
    font-weight: 200;
    padding: 50px;
    /* HORIZONTAL */
    /* increase bottom margin to fit the pips */
}
.ui-slider-horizontal.ui-slider-pips {
    margin-bottom: 1.4em;
    /* default hide the labels and pips that arnt visible */
    /* we just use css to hide incase we want to show certain */
    /* labels/pips individually later */
}
.ui-slider-pips .ui-slider-label,
.ui-slider-pips .ui-slider-pip-hide {
    display: none;
    /* now we show any labels that we've set to show in the options */
}
.ui-slider-pips .ui-slider-pip-label .ui-slider-label {
    display: block;
    /* PIP/LABEL WRAPPER */
    /* position each pip absolutely just below the default slider */
    /* and also prevent accidental selection */
}
.ui-slider-pips .ui-slider-pip {
    width: 2em;
    height: 1em;
    line-height: 1em;
    position: absolute;
    font-size: 0.8em;
    color: #999;
    overflow: visible;
    text-align: center;
    top: 20px;
    left: 20px;
    margin-left: -1em;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* little pip/line position & size */
}
.ui-slider-pips .ui-slider-line {
    background: #999;
    width: 1px;
    height: 3px;
    position: absolute;
    left: 50%;
    /* the text label postion & size */
    /* it overflows so no need for width to be accurate */
}
.ui-slider-pips .ui-slider-label {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -1em;
    width: 2em;
    /* make it easy to see when we hover a label */
}
.ui-slider-pip:hover .ui-slider-label {
    color: black;
    /* VERTICAL */
    /* vertical slider needs right-margin, not bottom */
}
.ui-slider-vertical.ui-slider-pips {
    margin-bottom: 1em;
    margin-right: 2em;
    /* align vertical pips left and to right of the slider */
}
.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
    text-align: left;
    top: auto;
    left: 20px;
    margin-left: 0;
    margin-bottom: -0.5em;
    /* vertical line/pip should be horizontal instead */
}
.ui-slider-vertical.ui-slider-pips .ui-slider-line {
    width: 3px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-label {
    top: 50%;
    left: 0.5em;
    margin-left: 0;
    margin-top: -0.5em;
    width: 2em;
    /* FLOATING HORIZTONAL TOOLTIPS */
    /* remove the godawful looking focus outline on handle and float */
}
.ui-slider-float .ui-slider-handle:focus,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label {
    outline: none;
    /* style tooltips on handles and on labels */
    /* also has a nice transition */
}
.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-label {
    position: absolute;
    visibility: hidden;
    top: -40px;
    display: block;
    width: 34px;
    margin-left: -18px;
    left: 50%;
    height: 20px;
    line-height: 20px;
    background: white;
    border-radius: 3px;
    border: 1px solid #888;
    text-align: center;
    font-size: 12px;
    opacity: 0;
    color: #333;
    -webkit-transition-duration: 200ms, 200ms, 0;
    transition-duration: 200ms, 200ms, 0;
    -webkit-transition-property: opacity, top, visibility;
    transition-property: opacity, top, visibility;
    -webkit-transition-delay: 0, 0, 200ms;
    transition-delay: 0, 0, 200ms;
    /* show the tooltip on hover or focus */
    /* also switch transition delay around */
}
.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
    opacity: 1;
    top: -30px;
    visibility: visible;
    -webkit-transition-delay: 200ms, 200ms, 0;
    transition-delay: 200ms, 200ms, 0;
    /* put label tooltips below slider */
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
    top: 42px;
}
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
    top: 32px;
    font-weight: normal;
    /* give the tooltip a css triangle arrow */
}
.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
    content: " ";
    width: 0;
    height: 0;
    border: 5px solid rgba(255, 255, 255, 0);
    border-top-color: white;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    /* put a 1px border on the tooltip arrow to match tooltip border */
}
.ui-slider-float .ui-slider-tip:before,
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
    content: " ";
    width: 0;
    height: 0;
    border: 5px solid rgba(255, 255, 255, 0);
    border-top-color: #888;
    position: absolute;
    bottom: -11px;
    left: 50%;
    margin-left: -5px;
    /* switch the arrow to top on labels */
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
    border: 5px solid rgba(255, 255, 255, 0);
    border-bottom-color: white;
    top: -10px;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
    border: 5px solid rgba(255, 255, 255, 0);
    border-bottom-color: #888;
    top: -11px;
    /* FLOATING VERTICAL TOOLTIPS */
    /* tooltip floats to left of handle */
}
.ui-slider-vertical.ui-slider-float .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
    top: 50%;
    margin-top: -11px;
    width: 34px;
    margin-left: 0px;
    left: -60px;
    color: #333;
    -webkit-transition-duration: 200ms, 200ms, 0;
    transition-duration: 200ms, 200ms, 0;
    -webkit-transition-property: opacity, left, visibility;
    transition-property: opacity, left, visibility;
    -webkit-transition-delay: 0, 0, 200ms;
    transition-delay: 0, 0, 200ms;
}
.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
    top: 50%;
    margin-top: -11px;
    left: -50px;
    /* put label tooltips to right of slider */
}
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
    left: 47px;
}
.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
    left: 37px;
    /* give the tooltip a css triangle arrow */
}
.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
    border: 5px solid rgba(255, 255, 255, 0);
    border-left-color: white;
    border-top-color: transparent;
    position: absolute;
    bottom: 50%;
    margin-bottom: -5px;
    right: -10px;
    margin-left: 0;
    top: auto;
    left: auto;
}
.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
    border: 5px solid rgba(255, 255, 255, 0);
    border-left-color: #888;
    border-top-color: transparent;
    position: absolute;
    bottom: 50%;
    margin-bottom: -5px;
    right: -11px;
    margin-left: 0;
    top: auto;
    left: auto;
}
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
    border: 5px solid rgba(255, 255, 255, 0);
    border-right-color: white;
    right: auto;
    left: -10px;
}
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
    border: 5px solid rgba(255, 255, 255, 0);
    border-right-color: #888;
    right: auto;
    left: -11px;
    /* SELECTED STATES */
    /* Comment out this chuck of code if you don't want to have
    the new label colours shown */
}
.ui-slider-pips .ui-slider-pip-selected-initial,
.ui-slider-pips .ui-slider-pip-selected-initial-first,
.ui-slider-pips .ui-slider-pip-selected-initial-second {
    font-weight: bold;
    color: #14ca82;
}
.ui-slider-pips .ui-slider-pip-selected-initial-second {
    color: #1897c9;
}
.ui-slider-pips .ui-slider-pip-selected,
.ui-slider-pips .ui-slider-pip-selected-first,
.ui-slider-pips .ui-slider-pip-selected-second {
    font-weight: bold;
    color: #ff7a00;
}
.ui-slider-pips .ui-slider-pip-selected-second {
    color: #e70081;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-pip,
.ui-slider-vertical.ui-slider-pips .ui-slider-label {
    font-size: 10px;
    width: 60px;
    left: 0;
    margin-left: 0;
    text-align: center;
    color: black;
    z-index: 10;
}

HTML

<label>
                Base Temp (c)
                <input type="number" value="37" class="baseTemp" max="50">
            </label>
            <label>
                Altitude (m)
                <input type="number" value="1000" class="altitude" max="12000">
            </label>

<div class="row">
                <div class="medium-12 columns">
                    <table width="100%">
                        <thead>
                            <tr>
                                <th>Effect</th>
                                <th>Value *</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Atmospheric Pressure</td>
                                <td class="atm">0</td>
                            </tr>
                            <tr>
                                <td>Available Oxygen</td>
                                <td class="oxygen">0</td>
                            </tr>
                            <tr>
                                <td>Ambient Temperature</td>
                                <td class="ambient">0</td>
                            </tr>
                        </tbody>
                    </table>
                    <small><em>* Values are not completely accurate due to JavaScript Floating Errors</em></small>
                </div>
            </div>
        </div>

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

jQuery-ui-Slider-Pips 滑块插件，v1.7.0； https://github.com/simeydotme/jQuery-ui-Slider-Pips

slider

编辑器支持Emmet

快捷键

jQuery-ui-Slider-Pips 滑块插件，v1.7.0； https://github.com/simeydotme/jQuery-ui-Slider-Pips

slider

一款jQuery幻灯片轮播插件和悬停悬浮卡片交互特效

基于jQuery和GSAP实现的页面滚动图像过渡切换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：