效果：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='/images/loading.gif' data-original="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 1166 <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 2175 <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 3183 <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 4191 <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 5199 <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 6207 <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 7215 <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 8223 <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 9231 <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 10239 <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 11247 <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
原标题：jQuery仿阿里云购买选择购买时间长度
关键词：jquery
我知道了 