带有过渡的范围滑块图像交换

时间：2018-10-06 11:17:52

标签： jquery css slider transition price

我有这个价格滑块：

https://codepen.io/anterias/pen/gBwxrL

滑块上的每一步，右边的图像都会改变。是否可以使图像平滑或过渡。

我尝试在图像的每个步骤中添加不同的类，但没有成功。还有其他可能性吗？

感谢您的帮助！

此处的原始代码：Jquery Range Slider with Image Swap 

var imageUrl = new Array();

imageUrl[1000] = 'https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz';
imageUrl[1500] = 'https://docs.google.com/uc?id=1SM5lY2dOHPWBSEWW_wjVnJa4TEbXTHeM';
imageUrl[2000] = 'https://docs.google.com/uc?id=1L0wW0z05rAve6lJDAk7bFkftlwUTEcgW';
imageUrl[2500] = 'https://docs.google.com/uc?id=1wlD0jquk-fFozq3EjUcgMkmAbt6TDJCf';
imageUrl[3000] = 'https://docs.google.com/uc?id=1sYJhZk43vM_V2X8hit7BVnQQ7eqP6nsk';
imageUrl[3500] = 'https://docs.google.com/uc?id=1Y4ns2eU4ofW-5xA9QP-TxTxlWQ2gPqZL';
imageUrl[4000] = 'https://docs.google.com/uc?id=1mHgMSqzeiMfUc_IDtXA9VkfxvExzltSV';
imageUrl[4500] = 'https://docs.google.com/uc?id=1lRNvcd8BdmsuriyDfoBDt2VnuIy9izSx';
imageUrl[5000] = 'https://docs.google.com/uc?id=1gwQVUVuNSKo3PqrJmtBxBsqC02Df29zw';
imageUrl[5500] = 'https://docs.google.com/uc?id=1pMvUCR9inb3aiAVWG4-blNuL41y9CZQV';
imageUrl[6000] = 'https://docs.google.com/uc?id=1PdChm6wtInsUtWDZt6Z5yz_HKDrbBxW3';
imageUrl[6500] = 'https://docs.google.com/uc?id=15nvfk5pXpThMAUiactpgv14Jg5Sbl6GJ';
imageUrl[7000] = 'https://docs.google.com/uc?id=1NbASgHWGrx-69K0CQ0qhnqx_ge4IHPX3';
imageUrl[7500] = 'https://docs.google.com/uc?id=1gc_HYWJe9JzCKC8jLavSAM8AGndCW1T1';
imageUrl[8000] = 'https://docs.google.com/uc?id=1TE5fSnWLFTkUaKlVGf0vom1HQPuvb0Wg';
       
$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").prop("src", imageUrl[v]);
}); 
body {
	background:#f3f3f3;
	padding:20px;
  font-family:titillium web
}

h2 {
  font-size:35px;
}

h3 {
  font-size:25px;
}

img {
	max-height:280px;
	width:auto;
	margin-top:0px;
}

.left,
right{
  float:left;
  width:50%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
		border-radius:50px;
	margin:20px auto 20px;
	max-width:600px;

}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background: #3FA3E9;
    cursor: pointer;
		border-radius:50px;
	  border:none!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  
<div class="left">

<div class="left-section-first">
<h2>How much it will cost?</h2>
<input type="range" id="slider" min="1000" max="8000" step="500" value="0" class="slider"/>
</div>

<div class="left-section-second">
<h3>Price = <span id="sliderStatus"></span>
</div>
</div>

<div class="right">
<div class="right-section-first">
<img src="https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz" id='img'/>
</div>
</div>

</body>

2 个答案:

答案 0 :(得分：0)

您可以执行类似隐藏图像的操作，并添加jQuery fadeIn效果。

$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
    $('#sliderStatus').html( $(this).val() );
    $("#img").fadeIn("slow");
    $("#img").stop().hide().fadeIn("slow");
    $("#img").prop("src", imageUrl[v]);
});

我猜这行得通。

var imageUrl = new Array();

imageUrl[1000] = 'https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz';
imageUrl[1500] = 'https://docs.google.com/uc?id=1SM5lY2dOHPWBSEWW_wjVnJa4TEbXTHeM';
imageUrl[2000] = 'https://docs.google.com/uc?id=1L0wW0z05rAve6lJDAk7bFkftlwUTEcgW';
imageUrl[2500] = 'https://docs.google.com/uc?id=1wlD0jquk-fFozq3EjUcgMkmAbt6TDJCf';
imageUrl[3000] = 'https://docs.google.com/uc?id=1sYJhZk43vM_V2X8hit7BVnQQ7eqP6nsk';
imageUrl[3500] = 'https://docs.google.com/uc?id=1Y4ns2eU4ofW-5xA9QP-TxTxlWQ2gPqZL';
imageUrl[4000] = 'https://docs.google.com/uc?id=1mHgMSqzeiMfUc_IDtXA9VkfxvExzltSV';
imageUrl[4500] = 'https://docs.google.com/uc?id=1lRNvcd8BdmsuriyDfoBDt2VnuIy9izSx';
imageUrl[5000] = 'https://docs.google.com/uc?id=1gwQVUVuNSKo3PqrJmtBxBsqC02Df29zw';
imageUrl[5500] = 'https://docs.google.com/uc?id=1pMvUCR9inb3aiAVWG4-blNuL41y9CZQV';
imageUrl[6000] = 'https://docs.google.com/uc?id=1PdChm6wtInsUtWDZt6Z5yz_HKDrbBxW3';
imageUrl[6500] = 'https://docs.google.com/uc?id=15nvfk5pXpThMAUiactpgv14Jg5Sbl6GJ';
imageUrl[7000] = 'https://docs.google.com/uc?id=1NbASgHWGrx-69K0CQ0qhnqx_ge4IHPX3';
imageUrl[7500] = 'https://docs.google.com/uc?id=1gc_HYWJe9JzCKC8jLavSAM8AGndCW1T1';
imageUrl[8000] = 'https://docs.google.com/uc?id=1TE5fSnWLFTkUaKlVGf0vom1HQPuvb0Wg';
       
$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").fadeIn("slow");
  $("#img").stop().hide().fadeIn("slow");
  $("#img").prop("src", imageUrl[v]);
});
body {
	background:#f3f3f3;
	padding:20px;
  font-family:titillium web
}

h2 {
  font-size:35px;
}

h3 {
  font-size:25px;
}

img {
	max-height:280px;
	width:auto;
	margin-top:0px;
}

.left,
right{
  float:left;
  width:50%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
		border-radius:50px;
	margin:20px auto 20px;
	max-width:600px;

}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background: #3FA3E9;
    cursor: pointer;
		border-radius:50px;
	  border:none!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  
<div class="left">

<div class="left-section-first">
<h2>How much it will cost?</h2>
<input type="range" id="slider" min="1000" max="8000" step="500" value="0" class="slider"/>
</div>

<div class="left-section-second">
<h3>Price = <span id="sliderStatus"></span>
</div>
</div>

<div class="right">
<div class="right-section-first">
<img src="https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz" id='img'/>
</div>
</div>

</body>

答案 1 :(得分：0)

我将使用两个img标签而不是两个。一个显示当前图像，另一个显示褪色。

每次输入更改时，我都会切换一个类，该类将隐藏一个图像并显示另一个图像。

添加此HTML 

<div class="right-section-first">
  <img class="first-image" src="https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz"/>
  <img class="second-image hidden"/>
</div>
</div>

此CSS 

.hidden {
 opacity: 0;
}
img {
  opacity:1;
  position: absolute;
    max-height:280px;
    width:auto;
    margin-top:0px;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-in;

}
.right-section-first {
  position: relative;
}

还有这个JS 

$('#slider').change(function(){
$('#sliderStatus').html( $(this).val() );
      var v = $(this).val();
      $('.hidden').attr("src", imageUrl[v]);

setTimeout(()=> {
    $('img').toggleClass('hidden');
}, 1000)

});

或者，只需查看我的Fiddle

相关问题
最新问题