如何使用jQuery选择带有数组的随机元素

时间:2017-08-11 20:33:16

标签: javascript jquery html css

我正在重新制作谷歌我感觉很幸运动画,我只是想知道如何在我的按钮上显示其中一个事件,但是它随意选择它的高度。他们的工作方式是我有一个最大高度的按钮,我隐藏了溢出。 html和css很好,我只想让jQuery随机选择其中一个元素。

$('.mainbutton:nth-child(2)').hover(function() { //jQuery
  var list = $(".mainbutton ul").toArray();
  var elemlength = list.length;
  var randomnum = Math.floor(Math.random()*elemlength);
  var randomitem = list[randomnum];

  $('.'+ randomitem ).css('bottom', '-170px');
  $('.'+ randomitem ).css('bottom', '-130px');
  $('.'+ randomitem ).css('bottom', '-100px');
  $('.'+ randomitem ).css('bottom', '-70px');
  $('.'+ randomitem ).css('bottom', '-40px');
  $('.'+ randomitem ).css('bottom', '-10px');
  $('.'+ randomitem ).css('bottom', '-180px');
  $('.'+ randomitem ).css('bottom', '-220px');
  $('.'+ randomitem ).css('bottom', '-250px');
  $('.'+ randomitem ).css('bottom', '-170px');
  $('.'+ randomitem ).css('bottom', '-170px');
});


    .mainbutton {         /*css*/
        padding: 0px 0px;
        background: #f2f2f2;
        border-width: 0px;
        border-style: solid;
        border-radius: 2px;
        font-weight: bold;
        font-size: 12px;
        margin: 29 6px;
        color: #757575;
        overflow: hidden;
        position: relative;
        height: 34px;
        width: 144px;
        box-sizing: inherit;
    }
    .mainbutton:nth-child(1) {
        bottom: 13px;
    }
    .mainbutton ul li {
        list-style-type: none;
        padding: 8px 10px;
        text-align: left;
    }
    .mainbutton ul {
        padding-left: 10%;
        position: absolute;
        bottom: -160px;
        width: 144px;
    }
    .one {



<div id="search-buttons" align="center">    <!-- html -->
        <button class="mainbutton">Google Search</button>
        <button class="mainbutton">
          <ul>
            <li>I'm Feeling Stellar</li>
            <li>I'm Feeling Artistic</li>
            <li>I'm Feeling Wonderful</li>
            <li>I'm Feeling Curious</li>
            <li>I'm Feeling Hungry</li>
            <li>I'm Feeling Lucky</li>
            <li>I'm Feeling Doodley</li>
            <li>I'm Feeling Generous</li>
            <li>I'm Feeling Trendy</li>
            <li>I'm Feeling Puzzled</li>
            <li>I'm Feeling Playful</li>
          </ul>
        </button>

0 个答案:

没有答案