jQuery仿阿里云购买选择购买时间长度
效果：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
jQuery仿阿里云购买选择购买时间长度的更多相关文章
- 基于jQuery仿去哪儿城市选择代码
基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="lin ...
- [基础常识]阿里云ecs从购买到环境搭建和建站！！(phpstudy一件包）
首先如何购买ECS?发现有些人购买5G硬盘,我个人认为买硬盘应该购买20以上!这样以后好处理! 进入http://www.aliyun.com/product/ecs/?spm=5176.7189 ...
- 阿里云ECS服务器购买流程 (自定义配置购买、按月、按量购买)教程
阿里ECS云服务器自定义购买流程 本文提供全图文流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...
- 阿里云服务器的购买、基本配置、(xshell)远程连接、搭建环境
一.服务器的购买 1.购买时间点:搞活动的时候.利用学生身份购买 (1)活动:想白嫖一台服务器 双十一,可以在双十一左右,时间提前一点,百度或B站,搜阿里云服务器.腾讯服务器(618可能也有) 一般, ...
- 阿里云ECS服务器购买流程
先说说什么是阿里云服务器ECS?云服务器(Elastic Compute Service,即弹性计算服务,简称ECS)是阿里云提供的性能卓越.稳定可靠.弹性扩展的IaaS(Infrastructure ...
- 阿里云服务器(ECS)购买及配置总结
云服务器是一种简单高效.安全可靠.处理能力可弹性伸缩的计算服务.其管理方式比物理服务器更简单高效.用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器. 目前比较知名的与服务器提供商有:阿里云.百 ...
- 阿里云Linux服务器购买、配置
购买.配置阿里云Linux服务器配置ftp发布网站全教程 http://blog.csdn.net/Jolesen/article/details/77505840
- 8.仿阿里云虚拟云服务器的FTP（包括FTP文件夹大小限制）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 原文:http://dnt.dkill.net/Ar ...
- 阿里云虚拟主机MYSQL加密长度16位变61位
将网站迁移到阿里云虚拟主机后, 用户登录都提供密码错误, 一查询才发现MYSQL PASSWORD加密结果不致, 只有16位, 解决办法,在执行PASSWORD查询前,执行set old_passwo ...
随机推荐
- Nova PhoneGap框架 第八章 滚动条
你可能会疑惑为什么滚动条这么常见的功能会在这里单独列出,但如果你有过PhoneGap开发经验的话,你就会发现要在Android 2.3 里面实现滚动条那真不是一件容易的事. 8.1 概述 目前主流的P ...
- 如何在Visual Studio 工程之间共享静态内容 (js, css, img, etc.)
第一步: 文件夹上点击右键 -> Add -> Existing Item,单击选中文件,不要点击“Add”按钮,而是在“Add”按钮右边有个向下的小箭头,点击这个箭头,再点击“Add ...
- Silverlight和WPF中DataContractJsonSerializer对时间的处理差异
原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com Silverlight脱胎于WPF,他们的行为不完全并不完全相同,DataContractJsonSerializ ...
- Go语言实战 - revel框架教程之权限控制
一个站点上面最基本都会有三种用户角色,未登录用户.已登录用户和管理员.这一次我们就来看看在revel框架下如何进行权限控制. 因为revel是MVC结构的,每一个url其实都会映射到一个具体的Cont ...
- 大叔最新课程～MVC核心技术剖析
<MVC核心技术剖析介绍> 主讲:仓储大叔 时间:2016-12-04 20:30分 MVC各层分工 Http请求的过程 如何查找Action 如何渲染视图 ViewModel,DTO,D ...
- Docker学习笔记
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...
- removeClass 按钮点击添加class效果
html代码: <div class="game"> <span class="active">全部</span> < ...
- SQL Server中使用Check约束提升性能
在SQL Server中,SQL语句的执行是依赖查询优化器生成的执行计划,而执行计划的好坏直接关乎执行性能. 在查询优化器生成执行计划过程中,需要参考元数据来尽可能生成高效的执行计划, ...
- Evaluate Math Expression
Evaluate Math Expression eryar@163.com 摘要Abstract:本文简要介绍了数学表达式解析求值的几款开源软件,并结合程序代码说明了OpenCascade中表达式包 ...
- [转]自己写PHP扩展之创建一个类
原文:http://www.imsiren.com/archives/572 比如我们要创建一个类..PHP代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...