創建類似於iOS7的菜單選擇菜單

Question

我正在嘗試創建一個類似於iOS7上的選擇菜單的菜單。我一直在使用jQuery，但是我一直無法順利運行，看起來不錯。

有沒有人設法做到這一點，或者你知道在其他地方做過這樣的事情嗎？我可以看到一個例子嗎？

這裏是我想創建：

這是iOS7選擇菜單：

Answer 1

嗯，這是一個相當複雜的工程，因爲它涉及相當多的不同的東西，你還沒有提供任何代碼（還）。

因此，這裏有一些想法，可能會推你的項目到正確的方向：

取決於如何創建列表項，給他們一些顯示在列表中的位置（如在這裏我的ID：id="item-1"等）

然後，在懸停時，瀏覽列表項目並計算出距離選定的項目有多遠，例如使用Math.abs(selectedNumber - listItemNumber) 然後應用您的樣式更改，並根據項目的距離縮放比例。

下面是一個例子： https://jsfiddle.net/svArtist/7fgqu428/

$(".item").hover(function(){ 
 
    var curnum = $(this).attr("id").split("-").pop(); 
 
    scaleItems(curnum); 
 
}, function(){ 
 
reset(); 
 
}); 
 

 
function scaleItems(itemNum){ 
 
     $(".item").each(function(){ 
 
     var thisnum = $(this).attr("id").split("-").pop(); 
 
      
 
     $(this).css("font-size", (10+25/(1+Math.abs(itemNum - thisnum)))+"px"); 
 
     $(this).css("padding", (10+10/(1+Math.abs(itemNum - thisnum)))+"px 20px"); 
 
    }); 
 
} 
 

 
function reset(){ 
 
     $(".item").each(function(){ 
 
     $(this).css("font-size", "20px"); 
 
     $(this).css("padding", "20px"); 
 
    }); 
 
}

html{ 
 
    height:100%; 
 
} 
 
body{ 
 
    margin:0; 
 
    height:100%; 
 
} 
 
#wrapper{ 
 
    height:100%; 
 
    background-color:#888; 
 
} 
 
#menu{ 
 
    height:100%; 
 
    overflow-y:auto; 
 
    position:absolute; 
 
    left:0; 
 
    padding: 20px; 
 
    box-sizing:border-box; 
 
    background-color: rgba(255,255,255,0.5); 
 
} 
 
.item{ 
 
    padding:20px; 
 
    font-family:Arial, sans-serif; 
 
    font-size:20px; 
 
    font-weight:300; 
 
    border-bottom:1px solid #888; 
 
    cursor:pointer; 
 
    white-space: nowrap; 
 
} 
 

 
*{ 
 
    transition: all 0.5s; 
 
} 
 

 
.item:hover{ 
 
    font-size: 30px; 
 
    font-weight:600; 
 
    background:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="menu"> 
 
     <div id="item-1" class="item"> 
 
      Item 1 asdfsf djfkdjf 
 
     </div> 
 
     <div id="item-2" class="item"> 
 
      Item 2 asdfsf djfkdjf 
 
     </div> 
 
     <div id="item-3" class="item"> 
 
      Item 3 lköjhkghf dghggjkx dcd 
 
     </div> 
 
     <div id="item-4" class="item"> 
 
      Item 4 agh fkdjf 
 
     </div> 
 
     <div id="item-5" class="item"> 
 
      Item 5 dfggds soidfhsd fsss 
 
     </div> 
 
     <div id="item-6" class="item"> 
 
      Item 6 asdfsf djfkdjf 
 
     </div> 
 
     <div id="item-7" class="item"> 
 
      Item 7 dfg dg jfhfgh sfdgh 
 
     </div> 
 
    </div> 
 
</div>

這只是使用font-size和margin這麼遠，但你應該明白我的意思。

或者我也試過transform: scale()，但奇怪的是，這並沒有爲工作的順利開展： https://jsfiddle.net/svArtist/entw3mp1/