请问这个效果怎么做，我想了一早上都没有头绪？

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/01.css" /> <script type="text/javascript" src="jslib/jquery-1.11.0.js" ></script> <script type="text/javascript" src="js/01.js" ></script> </head> <body> <div class="mainbody"> <span class="tip">选择年龄</span> <ul class="date_ul"> <li class="line_01">28</li> <li class="line_02">29</li> <li class="line_03">30</li> <li class="line_04">31</li> <li class="line_05">32</li> </ul> </div> <input type="button" value="当前选中值" id="btn" /> <input type="text" disabled="disabled" id="info"/> </body> </html>下面是CSSbody,div,span,ul,li{ margin:0px; padding: 0px;} .mainbody ul{text-align: center; width: 240px;} /* 加样式, 整出立体效果 (我就写了简单的)*/ .line_03{border: 1px solid #CCCCCC; font-size: 20px;} .line_02, .line_04{font-size: 16px;} .line_01, .line_05{font-size: 12px;}下面是javascript$(document).ready(function() { $("#btn").click(function() { // 获取当前显示文本值 line_03当前显示的是30 var line_03_value = $(".line_03").text(); alert("line_03 " + line_03_value); }); document.onmousewheel = function(e) { e = e || window.event; var wheelDelta_value = e.wheelDelta; $("#info").val(wheelDelta_value); // 获取当前显示文本值 line_0X 当前显示值 var line_01_value = $(".line_01").text(); var line_02_value = $(".line_02").text(); var line_03_value = $(".line_03").text(); var line_04_value = $(".line_04").text(); var line_05_value = $(".line_05").text(); // 假设可选数字为0-32 // 滚轮数值为120, 并且选中行数值 > 3, 所有行数值减一 if (parseInt(wheelDelta_value) > 0 && parseInt(line_03_value) > 3) { $(".line_01").text(parseInt(line_01_value) - 1); $(".line_02").text(parseInt(line_02_value) - 1); $(".line_03").text(parseInt(line_03_value) - 1); $(".line_04").text(parseInt(line_04_value) - 1); $(".line_05").text(parseInt(line_05_value) - 1); } if (parseInt(wheelDelta_value) < 0 && parseInt(line_03_value) < 30) { $(".line_01").text(parseInt(line_01_value) + 1); $(".line_02").text(parseInt(line_02_value) + 1); $(".line_03").text(parseInt(line_03_value) + 1); $(".line_04").text(parseInt(line_04_value) + 1); $(".line_05").text(parseInt(line_05_value) + 1); } } });// 能力有限, 只能写到这份上了

请问这个效果怎么做，我想了一早上都没有头绪？

1回答