Question

我不是很有经验，但我想做的就是这个。当页面加载时我没有背景但是在页面的右边我有一个从1到100的滑块。我正在寻找一种方法来创建一个从容器底部开始出现的背景当达到滑块的值100时，一直向上。

HTML

 <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"
                   });
  };
});

Answer 1

也许你可以尝试这样的事情。仅在FF tho中进行测试

$('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"});
});

FIDDLE

Answer 2

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

<强> JS：

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

如果您正在寻找，请告诉我。

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

2 个答案: