jQuery仿阿里云购买选择购买时间长度
2024-10-19 03:23:50
效果：http://hovertree.com/texiao/jquery/61/
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
最新文章
- [Sass]声明变量
- cocoapods安装出错问题
- C#中的Lambda表达式和表达式树
- 缓存插件 EHCache 页面缓存CachingFilter
- 购买咏南中间件送客户端C/S和B/S开发框架
- svn常用操作命令（不断更新中......）
- Linux企业级项目实践之网络爬虫（20）——扩展成为规则插件模式
- git linux 多工程部署及git默认端口更改
- Redis 基础数据结构与对象
- Python之数据类型-[bisect,heap]
- Snapde电子表格支持的文件格式
- 移植 iperf 网络性能测试工具到 Android-P
- 上传js,js修改html
- ie8网页时调用特定的css文件
- pyhton 核心编程 正则表达式习题
- T-SQL:排除阻塞（十六）
- Error loading page Domain: WebKitErrorDomain Error Code: 101
- 聚类分析K均值算法讲解
- vue element-ui怎样提炼一个自己写的js当作公共js
- 10.C#知识点:操作XML
热门文章
- Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序
- 一步步学习javascript基础篇（6）：函数表达式之【闭包】
- SQL Server 深入解析索引存储(下)
- ABP(现代ASP.NET样板开发框架)主题线下交流会（上海）开始报名了！
- 《Entity Framework 6 Recipes》中文翻译系列 (40) ------ 第七章 使用对象服务之从跟踪器中获取实体与从命令行生成模型（想解决EF第一次查询慢的，请阅读）
- Elasticsearch 5.0 —— Head插件部署指南
- 如何在多线程leader-follower模式下正确的使用boost::asio。
- 在usercontrol里实现导航
- JAVA的静态变量、静态方法、静态类
- lintcode二叉树的锯齿形层次遍历 （双端队列）