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 ...
随机推荐
- CSS3 Flexbox不迷路指南
Flexbox早有耳闻,但是决定切实尝试一番,还是因为看了这条围脖: 我觉得用flexbox可以实现,但是发觉无从下手,属性特性都不了解.趁此机会,学习下. 英文原版参考资料在这里:A Complet ...
- Redis初级介绍
1 什么是Redis Redis(REmote DIctionary Server,远程数据字典服务器)是开源的内存数据库,常用作缓存或者消息队列. Redis的特点: Redis存在于内存,使用硬盘 ...
- 有关binlog的那点事（三）（mysql5.7.13）
这次我们要探索更精细的binlog内容,上次讨论的Query_event和Rows_event肯定有让你疑惑不解的问题.Query_event中的status-vars环境变量有哪些,Rows_eve ...
- 【初恋】vue单页应用开发总结
vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...
- python利用dict模拟switch
pytho本身并未提供switch语句,但可以通过dict来模拟switch, #方法1 def add(x,y): return x+y def dec(x,y): return x-y def m ...
- Struts.xml中Action的method与路径的三种匹配方法
原文 http://blog.csdn.net/woshixuye/article/details/7734482 首先我们有一个Action——UserAction public class Us ...
- HTTP的RST包与WinHttp延迟关闭TCP连接
一.RST包也常见于断开TCP连接 几个月前用wireshark抓HTTP包发现有的网络通信在结束的时候没有使用四次握手,而是直接使用RST包.如: 在TCP协议中RST表示复位,用来异常的关闭连接 ...
- 【商业源码】生日大放送-Newlife商业源码分享
今天是农历六月二十三,是@大石头的生日,记得每年生日都会有很劲爆的重量级源码送出,今天Newlife群和论坛又一次疯狂了,吃水不忘挖井人,好的东西肯定要拿到博客园分享.Newlife组件信息: 论坛: ...
- 虚拟化 - 每天5分钟玩转 OpenStack（2）
OpenStack是云操作系统,要学习OpenStack,首先需要掌握一些虚拟化和云计算的相关知识. 虚拟化 虚拟化是云计算的基础.简单的说,虚拟化使得在一台物理的服务器上可以跑多台虚拟机,虚拟机共享 ...
- Web APi入门之Self-Host寄宿及路由原理（二）
前言 刚开始表面上感觉Web API内容似乎没什么,也就是返回JSON数据,事实上远非我所想,不去研究不知道,其中的水还是比较深,那又如何,一步一个脚印来学习都将迎刃而解. Self-Host 我们知 ...