請(qǐng)問(wèn)這個(gè)效果怎么做，我想了一早上都沒(méi)有頭緒？
你你你你說(shuō)什么
2016-05-05 11:51:08
1 回答
已采納
littleOStar
TA貢獻(xiàn)28條經(jīng)驗(yàn) 獲得超4個(gè)贊
<!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="當(dāng)前選中值"?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;}
/*?加樣式,?整出立體效果?(我就寫(xiě)了簡(jiǎn)單的)*/
.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()?{
//?獲取當(dāng)前顯示文本值??line_03當(dāng)前顯示的是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);
//?獲取當(dāng)前顯示文本值??line_0X??當(dāng)前顯示值
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();
//?假設(shè)可選數(shù)字為0-32
//?滾輪數(shù)值為120,?并且選中行數(shù)值?>?3,?所有行數(shù)值減一
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);
}
}
});// 能力有限, 只能寫(xiě)到這份上了
-
你你你你說(shuō)什么非常感謝，提供了很好的思路！已采納！
添加回答
舉報(bào)
0/150
提交
取消