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 ...
随机推荐
- ReactJS入门（一）—— 初步认识React
React刚开始红的时候,由于对其不甚了解,觉得JSX的写法略非主流,故一直没打算将其应用在项目上,随着身边大神们的科普,才后知后觉是个好东西. 好在哪里呢?个人拙见,有俩点: 1. 虚拟DOM —— ...
- 初识ASP.NET Core 1.0
本文将对微软下一代ASP.NET框架做个概括性介绍,方便大家进一步熟悉该框架. 在介绍ASP.NET Core 1.0之前有必要澄清一些产品名称及版本号.ASP.NET Core1.0是微软下一代AS ...
- [.net 面向对象程序设计进阶] (23) 团队开发利器（二）优秀的版本控制工具SVN(上)
[.net 面向对象程序设计进阶] (23) 团队开发利器(二)优秀的版本控制工具SVN(上) 本篇导读: 上篇介绍了常用的代码管理工具VSS,看了一下评论,很多同学深恶痛绝,有的甚至因为公司使用VS ...
- JavaScript状态机程序逻辑编辑器
制作背景 之前做Win8 Metro动态加载内容框架的时候,由于采用了XAML+JavaScript的方法,程序复杂的执行逻辑是由JavaScript控制的,而页面一多,流程一复杂,制作起来就非常麻烦 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (12) -----第三章 查询之使用SQL语句
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-2使用原生SQL语句更新 问题 你想在实体框架中使用原生的SQL语句,来更新底层 ...
- JS设计模式（一）
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- SSISDB5：Parameter
Parameter 是Package 提供给外界的接口,通过传递不同的Parameter value,能够动态控制 Package 执行不同的Task或container,产生不同的结果. 一,Par ...
- jQuery2.0.3源码分析系列之(29) 窗口尺寸
.height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width() 基础回顾 一般的,在获取浏览器窗口的大小和位置 ...
- MVC5 网站开发实践 概述
目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目 MVC5 网站开发实践 2.后台管理 MVC5 网站开发实践 2.1.管理员登陆 MVC5 网站开发实践 2.2.管理 ...
- linux标准IO缓冲（apue）
为什么需要标准IO缓冲? LINUX用缓冲的地方遍地可见,不管是硬件.内核还是应用程序,内核里有页高速缓冲,内存高速缓冲,硬件更不用说的L1,L2 cache,应用程序更是多的数不清,基本写的好的软件 ...