![](/img/trans.png)
[英](How) Can I select all elements in an array exept a random an element selected by math.random?
[英]How can I select random element with an array using jQuery
我正在重新制作Google動畫,感覺很幸運,我只是想知道如何在按鈕上顯示這些事件之一,但要使其隨機選擇其高度。 他們的工作方式是我有一個最大高度的按鈕,並且隱藏了溢出。 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>
有幾件事。
var pos = { "Playful": -10, "Puzzled": -40, "Trendy": -70, "Generous": -100, "Doodley": -130, "Lucky": -160, "Hungry": -190, "Curious": -220, "Wonderful": -250, "Artistic": -280, "Stellar": -310 } $(function() { $('.mainbutton:nth-child(2)').hover( function() { var $ul = $(".mainbutton ul"), $lis = $ul.children(), $li = $lis.eq(Math.floor(Math.random() * $lis.length)), name = $li.text().replace(/I'm Feeling /, ""); $ul.css("bottom", pos[name] + "px"); // using name $ul.animate({'bottom': '-170px'}) .animate({'bottom': '-130px'}) .animate({'bottom': '-100px'}) .animate({'bottom': '-70px'}) .animate({'bottom': '-40px'}) .animate({'bottom': '-10px'}) .animate({'bottom': '-180px'}) .animate({'bottom': '-220px'}) .animate({'bottom': '-250px'}) .animate({'bottom': '-170px'}) .animate({'bottom': '-170px'}); }, function() { $(".mainbutton ul").stop().animate({ 'bottom': pos["Lucky"] + "px" }); } ); });
.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: 190px; 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: 190px; } .one {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <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>
通過@mplungjan添加到答案
將邊距存儲在數組中
var margin= ['-170px', '-130px', '-100px', '-70px', '-40px', '-10px', '-180px', '-220px', '-250px', '-170px', '-170px'];
選擇隨機余量索引
var margin_index= Math.round(Math.random() * 10);
設置隨機余量
$ul.animate({'bottom': margin[margin_index]});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.