标签：
效果：http://hovertree.com/texiao/jquery/61/
jQuery仿阿里云购买服务器选择时间长度,操作简单，只需点击所要选的时间段
代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <!-- 效果：http://hovertree.com/texiao/jquery/61/ --> 5 <meta charset="UTF-8"> 6 <title>jQuery点击选择购买年月时长 - 何问起</title><base target="_blank" /> 7 <meta name="author" content="何问起" /> 8 <style> 9 /*reset部分 start*/ 10 * { 11 padding: 0; 12 margin: 0; 13 } 14 15 html { 16 font-family: "Microsoft Yahei",Arial,sans-serif; 17 font-size: 12px; 18 } 19 20 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, button, textarea, p, th, td { 21 padding: 0; 22 margin: 0; 23 font-family: "Microsoft YaHei",sans-serif,Arial; 24 } 25 26 table { 27 border-collapse: collapse; 28 border-spacing: 0; 29 } 30 31 fieldset, img { 32 border: 0; 33 } 34 35 a { 36 text-decoration: none; 37 color: #000; 38 outline: none; 39 } 40 41 li { 42 list-style: none; 43 } 44 45 caption, th { 46 text-align: left; 47 } 48 49 h1, h2, h3, h4, h5, h6 { 50 font-weight: normal; 51 } 52 53 input, button, textarea, select, optgroup, option { 54 font-family: inherit; 55 font-size: inherit; 56 font-style: inherit; 57 font-weight: inherit; 58 outline: medium; 59 } 60 61 input, button, textarea, select { 62 *font-size: 100%; 63 } 64 /*a{-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear}*/ 65 .fl { 66 float: left; 67 } 68 69 .fr { 70 float: right; 71 } 72 73 .clear:after { 74 display: block; 75 content: "clear"; 76 height: 0; 77 clear: both; 78 overflow: hidden; 79 visibility: hidden; 80 } 81 82 .clear { 83 zoom: 1; 84 } 85 /*reset部分 end*/ 86 87 .hovertreeBar { 88 margin: 5px auto; 89 width: 1133px; 90 border: 1px solid #FFCC00; 91 background: #F2F2F2; 92 } 93 94 .hovertreeBar li { 95 position: relative; 96 float: left; 97 width: 80px; 98 height: 30px; 99 line-height: 30px; 100 border-right: 1px solid #FFCC00; 101 text-align: center; 102 } 103 104 .hovertreeBar li:last-child { 105 border: none; 106 } 107 108 .hovertreeBar li:hover { 109 background: #FCF8E3; 110 cursor: pointer; 111 cursor:pointer; 112 } 113 114 .hovertreeBar li p { 115 text-align: center; 116 } 117 118 .phovertreeindex { 119 display: none; 120 position: absolute; 121 left: 50%; 122 top: -53px; 123 margin-left: -40px; 124 width: 85px; 125 height: 30px; 126 line-height: 30px; 127 border: 1px solid #FFCC00; 128 background: #FCF8E3; 129 } 130 131 .hovertreeBar li:hover .phovertreeindex { /*display: block;*/ 132 } 133 134 .keleyitriangle-out { 135 position: absolute; 136 right: 36px; 137 width: 0; 138 height: 0; 139 border-width: 8px; 140 border-style: solid; 141 border-color: #ffcc00 transparent transparent transparent; 142 } 143 144 .keleyitriangle-inner { 145 position: absolute; 146 right: 37px; 147 width: 0; 148 height: 0; 149 border-width: 7px; 150 border-style: solid; 151 border-color: #FCF8E3 transparent transparent transparent; 152 } 153 .hovertreeinfo{text-align:center;} 154 </style> 155 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script> 156 </head> 157 <body> 158 <div class="hovertreeinfo"><h1>jQuery点击选择购买年月时长</h1><a href="http://hovertree.com/h/bjaf/njmbk43d.htm">原文</a> 159 <a href="http://hovertree.com/" target="_blank">首页</a> 160 <a href="http://hovertree.com/texiao/" target="_blank">特效</a> 161 </div> 162 <div> 163 <ul class="hovertreeBar clear" id="hovertreeindex"> 164 <li> 165 1 166 <div class="phovertreeindex"> 167 <div>购买1个月</div> 168 <div class="keleyitriangle-out"></div> 169 <div class="keleyitriangle-inner"></div> 170 </div> 171 172 </li> 173 <li> 174 2 175 <div class="phovertreeindex"> 176 <div>购买2个月</div> 177 <div class="keleyitriangle-out"></div> 178 <div class="keleyitriangle-inner"></div> 179 </div> 180 </li> 181 <li> 182 3 183 <div class="phovertreeindex"> 184 <div>购买3个月</div> 185 <div class="keleyitriangle-out"></div> 186 <div class="keleyitriangle-inner"></div> 187 </div> 188 </li> 189 <li> 190 4 191 <div class="phovertreeindex"> 192 <div>购买4个月</div> 193 <div class="keleyitriangle-out"></div> 194 <div class="keleyitriangle-inner"></div> 195 </div> 196 </li> 197 <li> 198 5 199 <div class="phovertreeindex"> 200 <div>购买5个月</div> 201 <div class="keleyitriangle-out"></div> 202 <div class="keleyitriangle-inner"></div> 203 </div> 204 </li> 205 <li> 206 6 207 <div class="phovertreeindex"> 208 <div>购买6个月</div> 209 <div class="keleyitriangle-out"></div> 210 <div class="keleyitriangle-inner"></div> 211 </div> 212 </li> 213 <li> 214 7 215 <div class="phovertreeindex"> 216 <div>购买7个月</div> 217 <div class="keleyitriangle-out"></div> 218 <div class="keleyitriangle-inner"></div> 219 </div> 220 </li> 221 <li> 222 8 223 <div class="phovertreeindex"> 224 <div>购买8个月</div> 225 <div class="keleyitriangle-out"></div> 226 <div class="keleyitriangle-inner"></div> 227 </div> 228 </li> 229 <li> 230 9 231 <div class="phovertreeindex"> 232 <div>购买9个月</div> 233 <div class="keleyitriangle-out"></div> 234 <div class="keleyitriangle-inner"></div> 235 </div> 236 </li> 237 <li> 238 10 239 <div class="phovertreeindex"> 240 <div>购买10个月</div> 241 <div class="keleyitriangle-out"></div> 242 <div class="keleyitriangle-inner"></div> 243 </div> 244 </li> 245 <li> 246 11 247 <div class="phovertreeindex"> 248 <div>购买11个月</div> 249 <div class="keleyitriangle-out"></div> 250 <div class="keleyitriangle-inner"></div> 251 </div> 252 </li> 253 <li> 254 1年 255 <div class="phovertreeindex"> 256 <div>购买1年</div> 257 <div class="keleyitriangle-out"></div> 258 <div class="keleyitriangle-inner"></div> 259 </div> 260 </li> 261 <li> 262 2年 263 <div class="phovertreeindex"> 264 <div>购买2年</div> 265 <div class="keleyitriangle-out"></div> 266 <div class="keleyitriangle-inner"></div> 267 </div> 268 </li> 269 <li> 270 3年 271 <div class="phovertreeindex"> 272 <div>购买3年</div> 273 <div class="keleyitriangle-out"></div> 274 <div class="keleyitriangle-inner"></div> 275 </div> 276 </li> 277 </ul> 278 </div> 279 280 <!-- JS部分 --> 281 <script> 282 283 var arOB = []; 284 var ULobj = $(‘#hovertreeindex>li‘); 285 for(var i=0;i<ULobj.length;i++){ 286 arOB.push(ULobj[i]); 287 } 288 289 function changeCS(ints){ 290 for(var i=0;i<arOB.length;i++){ 291 if( i <= ints ){ 292 arOB[i].style.backgroundColor="#FCF8E3"; 293 }else{ 294 arOB[i].style.backgroundColor="#F2F2F2"; 295 } 296 297 } 298 } 299 300 $(function(){ 301 $("#hovertreeindex>li").each(function(){ 302 $(this).click(function(){ 303 $(this).children(".phovertreeindex").show(); 304 $(this).siblings().children(".phovertreeindex").hide(); 305 var number=$(this).index(); 306 var $j=$("#hovertreeindex>li").length; 307 changeCS(number); 308 // var li=new Array([$j]); 309 // for(k=0;k<$i.length;k++){ 310 // alert(li[k]); 311 // } 312 }) 313 }) 314 }) 315 </script> 316 </body> 317 </html>
转自：http://hovertree.com/h/bjaf/njmbk43d.htm
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
标签：
原文地址：http://www.cnblogs.com/roucheng/p/timeselect.html
