jQuery仿阿里云購買服務(wù)器選擇時間長度,操作簡單，只需點(diǎn)擊所要選的時間段。下面給大家展示下效果圖，就什么都明白了，如果大家覺得不錯，請參考實現(xiàn)代碼。
效果圖如下：
代碼：
<!doctype html><html lang="en"><head><!-- 效果：http://hovertree.com/texiao/jquery// --><meta charset="UTF-"><title>jQuery點(diǎn)擊選擇購買年月時長 - 何問起</title><base target="_blank" /><meta name="author" content="何問起" /><style>/*reset部分 start*/* {padding: ;margin: ;}html {font-family: "Microsoft Yahei",Arial,sans-serif;font-size: px;}body, div, dl, dt, dd, ul, ol, li, h, h, h, h, h, h, form, fieldset, input, button, textarea, p, th, td {padding: ;margin: ;font-family: "Microsoft YaHei",sans-serif,Arial;}table {border-collapse: collapse;border-spacing: ;}fieldset, img {border: ;}a {text-decoration: none;color: #;outline: none;}li {list-style: none;}caption, th {text-align: left;}h, h, h, h, h, h {font-weight: normal;}input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;outline: medium;}input, button, textarea, select {*font-size: %;}/*a{-webkit-transition:all .s linear;-moz-transition:all .s linear;-ms-transition:all .s linear;-o-transition:all .s linear}*/.fl {float: left;}.fr {float: right;}.clear:after {display: block;content: "clear";height: ;clear: both;overflow: hidden;visibility: hidden;}.clear {zoom: ;}/*reset部分 end*/.hovertreeBar {margin: px auto;width: px;border: px solid #FFCC;background: #FFF;}.hovertreeBar li {position: relative;float: left;width: px;height: px;line-height: px;border-right: px solid #FFCC;text-align: center;}.hovertreeBar li:last-child {border: none;}.hovertreeBar li:hover {background: #FCFE;cursor: pointer;cursor:pointer;}.hovertreeBar li p {text-align: center;}.phovertreeindex {display: none;position: absolute;left: %;top: -px;margin-left: -px;width: px;height: px;line-height: px;border: px solid #FFCC;background: #FCFE;}.hovertreeBar li:hover .phovertreeindex { /*display: block;*/}.keleyitriangle-out {position: absolute;right: px;width: ;height: ;border-width: px;border-style: solid;border-color: #ffcc transparent transparent transparent;}.keleyitriangle-inner {position: absolute;right: px;width: ;height: ;border-width: px;border-style: solid;border-color: #FCFE transparent transparent transparent;}.hovertreeinfo{text-align:center;}</style><script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-...min.js"></script></head><body><div class="hovertreeinfo"><h>jQuery點(diǎn)擊選擇購買年月時長</h><a >原文</a><a target="_blank">首頁</a><a target="_blank">特效</a></div><div><ul class="hovertreeBar clear" id="hovertreeindex"><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li><div class="phovertreeindex"><div>購買個月</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li>年<div class="phovertreeindex"><div>購買年</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li>年<div class="phovertreeindex"><div>購買年</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li><li>年<div class="phovertreeindex"><div>購買年</div><div class="keleyitriangle-out"></div><div class="keleyitriangle-inner"></div></div></li></ul></div><!-- JS部分 --><script>var arOB = [];var ULobj = $('#hovertreeindex>li');for(var i=;i<ULobj.length;i++){arOB.push(ULobj[i]);}function changeCS(ints){for(var i=;i<arOB.length;i++){if( i <= ints ){arOB[i].style.backgroundColor="#FCFE";}else{arOB[i].style.backgroundColor="#FFF";}}}$(function(){$("#hovertreeindex>li").each(function(){$(this).click(function(){$(this).children(".phovertreeindex").show();$(this).siblings().children(".phovertreeindex").hide();var number=$(this).index();var $j=$("#hovertreeindex>li").length;changeCS(number);// var li=new Array([$j]);// for(k=;k<$i.length;k++){// alert(li[k]);// }})})})</script></body></html>jQuery模仿阿里云購買服務(wù)器選擇購買時間長度的代碼到此就寫完了，代碼比較簡單就沒寫注釋，如果大家有疑問歡迎給我留言，小編會及時給大家回復(fù)的！
新聞熱點(diǎn)
疑難解答
