执行随机CSS改变

$(window).scroll(function() { 
    if ($(window).scrollTop() > 200) { 
    $('#box').css({height:'100px', background-color:'green', overflow:'visible', width:'550px', margin:'0 auto' 
    }); 

    $('#box2').css({position:'fixed',left:'400px',height:'200px',background: '#CF0'}); 
}

我是新来的JavaScript，这很可能会成为一个快速的问题...执行随机CSS改变

什么我这里是修改CSS样式一个div（#box）的视您所在页面的位置（在这种情况下> 200）。

我想要实现的是向#box添加多个css变更并每次执行一个随机的变更。例如，每次从顶部滚动200次通过时，div都会以高度显示：'100px'具有绿色背景，高度：'200px'具有蓝色背景，或高度：'300px'具有红色背景。希望这个有意义....

来源

2013-11-01 user2945861

您发布的代码似乎这样做。你有什么问题？ – bfavaretto

是的它的工作原理，但我想添加随机CSS多个改建的一个divs，我有麻烦寻找解决方案，谢谢 – user2945861

你必须更具体...你想成为什么样的随机？你尝试过什么吗？你知道如何用js生成一个随机数吗？ – bfavaretto

你可以尝试这样的事情（调整scrollTop值和css style）

JS：

var classes = ['a', 'b', 'c']; 
$(window).scroll(function() { 
    if ($(window).scrollTop() > 20) { 
     var cls = classes[Math.floor(Math.random() * classes.length)]; 
     $('#box').toggleClass(cls); 
    } 
});

CSS：

.a { 
    background:red; 
    height:100px; 
} 
.b { 
    background:green; 
    height:200px; 
} 
.c { 
    background:blue; 
    height:300px; 
}

DEMO.

更新：切换只有每scrolldowm

$(function(){ 
    var classes = ['a', 'b', 'c']; 
    function down() 
    { 
     if ($(window).scrollTop() > 20) { 
      var cls = classes[Math.floor(Math.random() * classes.length)]; 
      $('#box').toggleClass(cls); 
      $(window).off('scroll.down'); 
     } 
    } 

    $(window).on('scroll.down', down).on('scroll.up', function(){ 
     if ($(window).scrollTop() < 20) { 
      $(window).on('scroll.down', down); 
     } 
    }); 
});

DEMO.

来源

2013-11-01 18:37:53

谢谢！似乎正在工作......但是，当您滚动时，它会不断改变课程。我的意思是，它留在三个特定的阶层。 – user2945861

谢谢！似乎正在工作......但是，当您滚动时，它会不断改变课程。我的意思是让它留在三人中的一个特定阶层。 @RCV – user2945861

@ user2945861，检查更新的答案。 –

执行随机CSS改变

回答

相关问题