jQuery仿阿里云购买选择购买时间长度
2016-04-28 18:11
453 查看
效果:http://hovertree.com/texiao/jquery/61/
jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段
代码:
转自:http://hovertree.com/h/bjaf/njmbk43d.htm
更多特效:http://www.cnblogs.com/roucheng/p/texiao.html
jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段
代码:
<!doctype html> <html lang="en"> <head> <!-- 效果:http://hovertree.com/texiao/jquery/61/ --> <meta charset="UTF-8"> <title>jQuery点击选择购买年月时长 - 何问起</title><base target="_blank" /> <meta name="author" content="何问起" /> <style> /*reset部分 start*/ * { padding: 0; margin: 0; } html { font-family: "Microsoft Yahei",Arial,sans-serif; font-size: 12px; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, button, textarea, p, th, td { padding: 0; margin: 0; font-family: "Microsoft YaHei",sans-serif,Arial; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } a { text-decoration: none; color: #000; outline: none; } li { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { 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: 100%; } /*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}*/ .fl { float: left; } .fr { float: right; } .clear:after { display: block; content: "clear"; height: 0; clear: both; overflow: hidden; visibility: hidden; } .clear { zoom: 1; } /*reset部分 end*/ .hovertreeBar { margin: 5px auto; width: 1133px; border: 1px solid #FFCC00; background: #F2F2F2; } .hovertreeBar li { position: relative; float: left; width: 80px; height: 30px; line-height: 30px; border-right: 1px solid #FFCC00; text-align: center; } .hovertreeBar li:last-child { border: none; } .hovertreeBar li:hover { background: #FCF8E3; cursor: pointer; cursor:pointer; } .hovertreeBar li p { text-align: center; } .phovertreeindex { display: none; position: absolute; left: 50%; top: -53px; margin-left: -40px; width: 85px; height: 30px; line-height: 30px; border: 1px solid #FFCC00; background: #FCF8E3; } .hovertreeBar li:hover .phovertreeindex { /*display: block;*/ } .keleyitriangle-out { position: absolute; right: 36px; width: 0; height: 0; border-width: 8px; border-style: solid; border-color: #ffcc00 transparent transparent transparent; } .keleyitriangle-inner { position: absolute; right: 37px; width: 0; height: 0; border-width: 7px; border-style: solid; border-color: #FCF8E3 transparent transparent transparent; } .hovertreeinfo{text-align:center;} </style> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script> </head> <body> <div class="hovertreeinfo"><h1>jQuery点击选择购买年月时长</h1><a href="http://hovertree.com/h/bjaf/njmbk43d.htm">原文</a> <a href="http://hovertree.com/" target="_blank">首页</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a> </div> <div> <ul class="hovertreeBar clear" id="hovertreeindex"> <li> 1 <div class="phovertreeindex"> <div>购买1个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 2 <div class="phovertreeindex"> <div>购买2个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 3 <div class="phovertreeindex"> <div>购买3个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 4 <div class="phovertreeindex"> <div>购买4个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 5 <div class="phovertreeindex"> <div>购买5个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 6 <div class="phovertreeindex"> <div>购买6个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 7 <div class="phovertreeindex"> <div>购买7个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 8 <div class="phovertreeindex"> <div>购买8个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 9 <div class="phovertreeindex"> <div>购买9个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 10 <div class="phovertreeindex"> <div>购买10个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 11 <div class="phovertreeindex"> <div>购买11个月</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 1年 <div class="phovertreeindex"> <div>购买1年</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 2年 <div class="phovertreeindex"> <div>购买2年</div> <div class="keleyitriangle-out"></div> <div class="keleyitriangle-inner"></div> </div> </li> <li> 3年 <div class="phovertreeindex"> <div>购买3年</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=0;i<ULobj.length;i++){ arOB.push(ULobj[i]); } function changeCS(ints){ for(var i=0;i<arOB.length;i++){ if( i <= ints ){ arOB[i].style.backgroundColor="#FCF8E3"; }else{ arOB[i].style.backgroundColor="#F2F2F2"; } } } $(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=0;k<$i.length;k++){ // alert(li[k]); // } }) }) }) </script> </body> </html>
转自:http://hovertree.com/h/bjaf/njmbk43d.htm
更多特效:http://www.cnblogs.com/roucheng/p/texiao.html
相关文章推荐
- jquery 1.9里面已经删除了toggle
- jQuery报错:Uncaught ReferenceError: $ is not defined
- jquery获取子节点和父节点的示例代码
- js (jQuery) 之 取值
- jQuery中,选中一级菜单,二级菜单自动出现的js代码
- 前端ers 必须知道的几个jquery cdn加速节点
- jquery UI Datepicker时间控件的使用及问题解决
- jquery tmpl 详解
- jQuery 获取当前节点的html包含当前节点的方法
- jquery中attr和prop的区别
- jquery attr prop checkbox已有checked=checked但不显示勾选问题
- jQuery插件写法总结以及面向对象方式写法总结
- 抛弃jQuery,拥抱原生JavaScript
- jQuery ajax后$(this)对象获取失败原因
- jQuery选择器使用习惯
- 关于jquery插件 入门
- Jquery图片上传预览效果
- 使用jquery修改css中带有!important的样式属性
- jQuery生成json对象
- jquery弹出遮掩层效果【附实例代码】