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 ...
随机推荐
- MySQL 分区介绍总结
200 ? "200px" : this.width)!important;} --> 介绍 分区是指根据一定的规则将一个大表分解成多个更小的部分,这里的规则一般就是利用分区 ...
- xamarin UWP ActivityIndicator
在xamarin的UWP平台使用ActivityIndicator时,如果你时后台创建的这个对象,请设置他的宽度,不然在UWP平台下会发现找不这个对象,其实是在这个平台和特点版本下的宽度没设置,导致有 ...
- Security7：View Usage
一,在Database level上,主要有 sys.database_principals, sys.database_permissions 和 sys.database_role_members ...
- 【Win 10 应用开发】RTM版的UAP项目解剖
Windows 10 发布后,其实SDK也偷偷地在VS的自定义安装列表中出现了,今天开发人员中心也更新了下载.正式版的SDK在API结构上和以前预览的时候是一样的,只是版本变成10240罢了,所以大家 ...
- OpenCASCADE Documentation System
OpenCASCADE Documentation System eryar@163.com Abstract. Doxygen is the de facto standard tool for g ...
- C#需知--长度可变参数--Params
Params用于参数的数量可变的情况下,即参数的个数是未知数. 使用Params需要知道以下几点: 1.如果函数传递的参数含有多个,使用Params标记的参数数组需要放在最后 图上显示的很明确,不需要 ...
- MVC5 网站开发实践 1、建立项目
目录 MVC5 网站开发实践 概述 一.建立项目 1.建立团队项目 在办公室和家里使用不同的电脑,为了方便代码的共享将项目建立为团队项目. 如图打开vs2013→新建→团队项目(图1),会自动 ...
- javascript运动系列第四篇——抖动
× 目录 [1]原理介绍 [2]代码实现 [3]实例应用 前面的话 在运动系列中,前面分别介绍了匀速运动.变速运动和曲线运动.下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊 ...
- SQL Server 存储过程生成insert语句
你肯定有过这样的烦恼,同样的表,不同的数据库,加入你不能执行select insert 那么你肯定需要一条这样的存储过程,之需要传入表明,就会给你生成数据的插入语句. 当然数据表数量太大,你将最好用 ...
- Web APi入门之移除XML格式（一）
前言 回头想来,没想到自己却坚持下来了,EntityFramework系列终于全部完成了,给自己点个赞先.本系列将着手于Web API,关于一些基础的介绍及定义就不再叙述,请参考园友们文章,非常详细, ...