创建类似于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/