基于范围滑块值从底部逐渐淡入背景

Background fading-in from the bottom based on a range slider value

本文关键字：底部 背景 淡入 于范围 范围      更新时间：2023-09-26

我不是很有经验，但我想做的是。当页面加载时，我没有背景，但在页面的右边，我有一个从1到100的滑块。我正在寻找一种方法，使背景开始出现从容器的底部，并走到所有的方式当滑块的值100达到。

 <section class= "pageContainer">
    <input type="range" min="0" max="100" step="1" value="0" name="slider" class="vSlider">
 </section>

问题是，我似乎找不到正确的想法关于什么javascript应该改变，以便我得到所需的效果。有人能帮我吗?

JS 

$('input[name=slider]').on('change', function () {
});

最终工作解:

// Variable declaration
var heightStore = [];
var heightProg = [];
var rowHeight;
var count = 0;
heightProg[0] = 0;
// Store each div height in an array
$(document).ready(function(){
  $.each($('.row'),function(){
    rowHeight = $(this).height();
    heightStore[count] = rowHeight;
    count++;
    heightProg[count] = heightProg[count-1]+rowHeight;
  })
});
heightProg.reverse();
// Calculate how many divs
var ct = $('.pageContainer').children().size() - 1;
// Function to execute on slider value change
$('input[name=slider]').on('input', function () {
if (!$("div").hasClass("pageContainer")) $("div").addClass("pageContainer");
  {for(var i=0;i<=ct;i++)
      if($(this).val() == Math.round(100/ct)*i)
      $("div").css({ "background-position" : "0px "+ heightProg[i] +"px"
                   });
  };
});

也许你可以试试这样做。仅在FF

中测试
$('input[name=slider]').on('input', function () {
  if (!$("body").hasClass("bg_img")) $("body").addClass("bg_img");    
  $("body").css({ "background-position" : "0px "+ ($(window).height() * (100 - $(this).val()) / 100) +"px"});
});

小提琴

我创建了一些小提琴:http://jsfiddle.net/Y4rZq/

JS: 

$('input[name=slider]').on('change', function () {
    $('body').css('background-color', 'rgba(0,0,0,' + (this.value / 100) + ')');
});

让我知道，如果这是你正在寻找的。

相关文章：