1 回答
已采纳
littleOStar
TA贡献28条经验 获得超4个赞
<!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>
下面是CSS
body,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 回答
- 0 关注
- 1438 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消