jQuery仿阿里云购买服务器选择时间长度,操作简单，只需点击所要选的时间段。下面给大家展示下效果图，就什么都明白了，如果大家觉得不错，请参考实现代码。
效果图如下：
代码：
<!doctype html> <html lang="en"> <head> <> <meta charset="UTF-"> <title>jQuery点击选择购买年月时长 - 何问起</title><> <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><h>jQuery点击选择购买年月时长</h><a href="http://hovertree.com/h/bjaf/njmbkd.htm">原文</a> <a href="http://hovertree.com/" target="_blank">首页</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a> </div> <div> <ul id="hovertreeindex"> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> <div> <div>购买个月</div> <div></div> <div></div> </div> </li> <li> 年 <div> <div>购买年</div> <div></div> <div></div> </div> </li> <li> 年 <div> <div>购买年</div> <div></div> <div></div> </div> </li> <li> 年 <div> <div>购买年</div> <div></div> <div></div> </div> </li> </ul> </div> <> <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模仿阿里云购买服务器选择购买时间长度的代码到此就写完了，代码比较简单就没写注释，如果大家有疑问欢迎给我留言，小编会及时给大家回复的！