手机端上下滑动选择项小组件

这是一个手机端的滑动选择小组件。

详细的需求介绍：话费充值，滑动选择充值面额，显示对应的应付金额即可。

重点请看javascript部分的代码，请大神指点。跪谢!

贴代码~

CSS 部分：

  1 html, body, h1, h2, h3, p, dl, dd, ol, ul, th, td, form, fieldset, input, button, textarea, a {  2   margin: 0;  3   padding: 0; }  4   5 html {  6   -webkit-text-size-adjust: none;  7   Word-wrap: break-word;  8   -webkit-touch-callout: none; }  9  10 h1, h2, h3 { 11   font-size: 100%; } 12  13 ol, ul { 14   list-style: none; } 15  16 table { 17   border-collapse: collapse; 18   border-spacing: 0; 19   empty-cells: show; 20   font-size: inherit; } 21  22 fieldset, img { 23   border: 0; } 24  25 cite, em, s, i, b { 26   font-style: normal; } 27  28 input, button, textarea, select { 29   font-size: 100%; } 30  31 body, input, button, textarea, select, option, optgroup { 32   font-size: 14px; } 33  34 a, input, textarea { 35   text-decoration: none; 36   outline: 0 none; 37   resize: none; 38   -webkit-tap-highlight-color: transparent; } 39  40 li, img, label, input { 41   vertical-align: middle; } 42  43 img { 44   display: block; } 45  46 a { 47   text-decoration: none; } 48  49 body { 50   font: 14px/1.2 "Microsoft Yahei","Hiragino Sans GB",arial,sans-serif; } 51  52 .clearfix:after { 53   display: block; 54   content: "/20"; 55   height: 0; 56   clear: both; 57   overflow: hidden; 58   visibility: hidden; } 59  60 html, body { 61   height: 100%; 62   background-color: #f1f1f1; } 63  64 /* sPRite icon */ 65 .icon-lottery, 66 .icon-phone, 67 .icon-game, 68 .icon-QQ, 69 .icon-hotel, 70 .icon-plane, 71 .icon-gas { 72   display: inline-block; 73   background: url(../img/base/sprite-icon.png) 0 0 no-repeat; 74   height: 112px; } 75  76 /* header */ 77 .header { 78   position: fixed; 79   top: 0; 80   left: 0; 81   width: 100%; 82   height: 42px; 83   line-height: 42px; 84   background-color: #f16b50; } 85  86 .header .title { 87   font-size: 16px; 88   color: #fff; 89   text-align: center; } 90  91 .header .icon-code-left { 92   position: absolute; 93   left: 0; 94   top: 0; 95   width: 34px; 96   height: 42px; 97   line-height: 42px; 98   font-size: 16px; 99   color: #fff;100   font-weight: bold;101   text-align: center; }102 103 .wrapper {104   padding-top: 42px; }105 106 /* btn */107 .btn {108   display: inline-block;109   background-color: #f16b50;110   text-align: center;111   color: #fff; }112 113 .btn-large {114   width: 100%;115   height: 40px;116   line-height: 40px; }117 118 /* home index */119 .icon-lottery {120   background-position: 0 0;121   width: 108px; }122 123 .icon-phone {124   background-position: -108px 0;125   width: 94px; }126 127 .icon-game {128   background-position: -204px 0;129   width: 108px; }130 131 .icon-qq {132   background-position: -314px 0;133   width: 99px; }134 135 .icon-hotel {136   background-position: -415px 0;137   width: 90px; }138 139 .icon-plane {140   background-position: -507px 0;141   width: 108px; }142 143 .icon-gas {144   background-position: -618px 0;145   width: 81px; }146 147 .recharge-list .r-l-item {148   float: left;149   width: 50%;150   line-height: 1;151   text-align: center; }152 153 .recharge-list a {154   display: block;155   padding: 58px 0; }156 157 .recharge-list .r-l-item.grey {158   background-color: #eee; }159 160 .recharge-list .r-l-describe {161   height: 22px;162   line-height: 22px;163   text-align: center;164   color: #333; }165 166 /* list.html */167 .w-list {168   xxpadding: 0 22px 0 12px; }169 170 .w-list .w-l-index {171   position: fixed;172   top: 50%;173   right: 0;174   margin-top: -196px;175   width: 22px;176   text-align: center; }177 178 .w-list .w-l-index a {179   color: #666; }180 181 .w-list .w-l-content dt {182   border-bottom: 1px solid #ccc;183   padding: 10px;184   line-height: 1.2;185   background-color: #f4f4f4;186   font-size: 16px;187   color: #f16b50; }188 189 .w-list .w-l-content dd {190   border-bottom: 1px solid #ccc;191   padding: 16px;192   line-height: 1.4; }193 194 .w-list .w-l-content dd a {195   font-size: 12px;196   color: #333; }197 198 /* recharge.html */199 .box-radius {200   margin: 14px 20px 0;201   border: 1px solid #ccc;202   border-radius: 8px;203   background-color: #FFF;204   overflow: hidden; }205 206 .input-group .label,207 .input-group .input-control {208   display: block;209   padding: 12px 8px; }210 211 .input-group .label {212   line-height: 22px; }213 214 .input-group .input-control {215   border: 0;216   line-height: 22px;217   width: 100%;218   box-sizing: border-box;219   background-color: transparent; }220 221 .input-group input.input-control {222   border: 1px solid #fff;223   border-top: 1px solid #ccc; }224 225 .input-group input.input-control:first-child {226   margin-top: -1px; }227 228 .input-group input.input-control.error {229   border-color: #f16b50;230   border-radius: 7px; }231 232 .recharge .btn-area {233   margin: 14px 20px 20px; }234 235 .recharge-list {236   border-top: 1px solid #ccc;237   height: 128px;238   overflow: hidden; }239 240 .recharge-list .r-l-left {241   position: relative;242   float: left;243   border-right: 1px solid #ccc;244   width: 50%;245   height: 100%;246   xxoverflow: auto; }247 248 .recharge-list .r-l-right {249   float: right;250   padding: 46px 14px 0;251   line-height: 1.5;252   font-weight: bold;253   width: 49%;254   box-sizing: border-box; }255 256 .recharge-list .r-l-left ul {257   margin: 0 12px;258   -webkit-transition: -webkit-transform 0s ease-out;259   -webkit-transform: translate3d(0, 0, 0); }260 261 .recharge-list .item {262   border-top: 1px solid #ccc;263   padding: 0 6px;264   height: 42px;265   line-height: 42px; }266 267 .recharge-list .item.current {268   font-weight: bold;269   font-size: 15px; }270 271 .recharge-list .item:first-child {272   border: 0; }273 274 .top-cover,275 .bottom-cover {276   position: absolute;277   left: 0;278   width: 100%;279   height: 22px;280   text-indent: -999em;281   background: #fff;282   opacity: 0.5; }283 284 .top-cover {285   top: 0; }286 287 .bottom-cover {288   bottom: 0; }289 290 .skin-color {291   font-weight: bold;292   color: #f16b50; }293 294 @media screen and (max-width: 320px) {295   .icon-lottery,296   .icon-phone,297   .icon-game,298   .icon-qq,299   .icon-hotel,300   .icon-plane,301   .icon-gas {302     height: 80px;303     background-size: 460px; }304 305   .icon-lottery {306     background-position: 0 0;307     width: 71px; }308 309   .icon-phone {310     background-position: -71px 0;311     width: 62px; }312 313   .icon-game {314     background-position: -133px 0;315     width: 73px; }316 317   .icon-qq {318     background-position: -206px 0;319     width: 66px; }320 321   .icon-hotel {322     background-position: -271px 0;323     width: 62px; }324 325   .icon-plane {326     background-position: -333px 0;327     width: 71px; }328 329   .icon-gas {330     background-position: -406px 0;331     width: 53px; } }

HTML 结构部分：

 1 <!doctype html> 2 <html> 3     <head> 4         <meta charset="utf-8"/> 5         <meta name="viewport" content="width=device-width, initial-scale=1,target-densitydpi=medium-dpi, user-scalable=no"> 6         <meta name="format