如何通过JavaScript创建图像效果滤镜面板？

Question

我想在面板下面构建这样的图像过滤器面板。

（当我们移动“密集”滑块时，所有其他滑块都会自动滑动）吗？

谢谢！

Answer 1

类似的东西？

请在宽屏中观看

$('.filter input[type=range]').on('input change', function() {
	$('img').css({
		'-webkit-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)',
		'-moz-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)',
		'-o-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)',
		'-ms-filter': 'blur(' + $('#blur').val() + 'px)brightness(' + $('#brightness').val() + ')saturate(' + $('#saturate').val() + '%)hue-rotate(' + $('#hue-rotate').val() + 'deg)contrast(' + $('#contrast').val() + '%)invert(' + $('#invert').val() + '%)grayscale(' + $('#grayscale').val() + '%)sepia(' + $('#sepia').val() + '%)',
	});
});

$('.transformation input[type=range]').on('input change', function() {
	$('img').css({
		'-ms-transform': 'rotate(' + $('#rotate').val() + 'deg) scale(' + $('#scale-x').val() + ',' + $('#scale-y').val() + ') translate(' + $('#translate-x').val() + 'px,' + $('#translate-y').val() + 'px) skew(' + $('#skew').val() + 'deg)',
		'-webkit-transform': 'rotate(' + $('#rotate').val() + 'deg) scale(' + $('#scale-x').val() + ',' + $('#scale-y').val() + ') translate(' + $('#translate-x').val() + 'px,' + $('#translate-y').val() + 'px) skew(' + $('#skew').val() + 'deg)',
		'transform ': 'rotate(' + $('#rotate').val() + 'deg) scale(' + $('#scale-x').val() + ',' + $('#scale-y').val() + ') translate(' + $('#translate-x').val() + 'px,' + $('#translate-y').val() + 'px) skew(' + $('#skew').val() + 'deg)'
	});
});

body {
  font-family: Helvetica;
  color: #2c3e50;
}

.wrapper {
  display: table;
  width: 100%;
}
.wrapper-content {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}
.filter, .transformation {
  display: table;
  width: 100%;
}
label {
  display: table-cell;
  width: 20%;
  padding-right: 10px;
  text-align: right;
  line-height: 28px;
}
input {
  vertical-align: middle;
  display: table-cell;
  width: 80%;
}
img {
  max-height: 620px;
  max-width: 620px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="wrapper-content">
        <div class="filter">
            <label>Blur:</label>
            <input type="range" id="blur" value="0" min="0" max="4" step="0.01" />
        </div>
        <div class="filter">
            <label>Brightness:</label>
            <input type="range" id="brightness" value="1" min="0" max="1" step="0.01" />
        </div>
        <div class="filter">
            <label>Saturate:</label>
            <input type="range" id="saturate" value="100" min="0" max="200" />
        </div>
        <div class="filter">
            <label>Hue:</label>
            <input type="range" id="hue-rotate" value="0" min="0" max="360" />
        </div>
        <div class="filter">
            <label>Contrast:</label>
            <input type="range" id="contrast" value="100" min="0" max="200" />
        </div>
        <div class="filter">
            <label>Invert:</label>
            <input type="range" id="invert" value="0" min="0" max="100" />
        </div>
        <div class="filter">
            <label>Grayscale:</label>
            <input type="range" id="grayscale" value="0" min="0" max="100" />
        </div>
        <div class="filter">
            <label>Sepia:</label>
            <input type="range" id="sepia" value="0" min="0" max="100" />
        </div>
        <br />
        <div class="transformation">
            <label>Rotate:</label>
            <input type="range" id="rotate" value="0" min="-360" max="360" />
        </div>
        <div class="transformation">
            <label>Scale (x):</label>
            <input type="range" id="scale-x" value="1" min="-4" max="4" step="0.1" />
        </div>
        <div class="transformation">
            <label>Scale (y):</label>
            <input type="range" id="scale-y" value="1" min="-4" max="4" step="0.1" />
        </div>
        <div class="transformation">
            <label>Translate (x):</label>
            <input type="range" id="translate-x" value="0" min="-80" max="80" />
        </div>
        <div class="transformation">
            <label>Translate (y):</label>
            <input type="range" id="translate-y" value="0" min="-80" max="80" />
        </div>
        <div class="transformation">
            <label>Skew:</label>
            <input type="range" id="skew" value="0" min="-360" max="360" />
        </div>
    </div>
    <div class="wrapper-content">
        <img src="http://patricktayloredwards.com/images/background.8fcc83c6.jpg" />
    </div>
</div>