jQuery模仿阿里云购买服务器选择购买时间长度的代码


Posted in Javascript onApril 29, 2016

jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段。下面给大家展示下效果图,就什么都明白了,如果大家觉得不错,请参考实现代码。

效果图如下:

jQuery模仿阿里云购买服务器选择购买时间长度的代码

代码:

<!doctype html>
<html lang="en">
<head>
<!-- 效果:http://hovertree.com/texiao/jquery// -->
<meta charset="UTF-">
<title>jQuery点击选择购买年月时长 - 何问起</title><base target="_blank" />
<meta name="author" content="何问起" />
<style>
/*reset部分 start*/
* {
padding: ;
margin: ;
}
html {
font-family: "Microsoft Yahei",Arial,sans-serif;
font-size: px;
}
body, div, dl, dt, dd, ul, ol, li, h, h, h, h, h, h, form, fieldset, input, button, textarea, p, th, td {
padding: ;
margin: ;
font-family: "Microsoft YaHei",sans-serif,Arial;
}
table {
border-collapse: collapse;
border-spacing: ;
}
fieldset, img {
border: ;
}
a {
text-decoration: none;
color: #;
outline: none;
}
li {
list-style: none;
}
caption, th {
text-align: left;
}
h, h, h, h, h, h {
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: %;
}
/*a{-webkit-transition:all .s linear;-moz-transition:all .s linear;-ms-transition:all .s linear;-o-transition:all .s linear}*/
.fl {
float: left;
}
.fr {
float: right;
}
.clear:after {
display: block;
content: "clear";
height: ;
clear: both;
overflow: hidden;
visibility: hidden;
}
.clear {
zoom: ;
}
/*reset部分 end*/
.hovertreeBar {
margin: px auto;
width: px;
border: px solid #FFCC;
background: #FFF;
}
.hovertreeBar li {
position: relative;
float: left;
width: px;
height: px;
line-height: px;
border-right: px solid #FFCC;
text-align: center;
}
.hovertreeBar li:last-child {
border: none;
}
.hovertreeBar li:hover {
background: #FCFE;
cursor: pointer;
cursor:pointer;
}
.hovertreeBar li p {
text-align: center;
}
.phovertreeindex {
display: none;
position: absolute;
left: %;
top: -px;
margin-left: -px;
width: px;
height: px;
line-height: px;
border: px solid #FFCC;
background: #FCFE;
}
.hovertreeBar li:hover .phovertreeindex { /*display: block;*/
}
.keleyitriangle-out {
position: absolute;
right: px;
width: ;
height: ;
border-width: px;
border-style: solid;
border-color: #ffcc transparent transparent transparent;
}
.keleyitriangle-inner {
position: absolute;
right: px;
width: ;
height: ;
border-width: px;
border-style: solid;
border-color: #FCFE transparent transparent transparent;
}
.hovertreeinfo{text-align:center;}
</style>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-...min.js"></script>
</head>
<body>
<div class="hovertreeinfo"><h>jQuery点击选择购买年月时长</h><a href="http://hovertree.com/h/bjaf/njmbkd.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>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>购买年</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>购买年</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>购买年</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=;i<ULobj.length;i++){
arOB.push(ULobj[i]);
}
function changeCS(ints){
for(var i=;i<arOB.length;i++){
if( i <= ints ){
arOB[i].style.backgroundColor="#FCFE";
}else{
arOB[i].style.backgroundColor="#FFF";
}
}
}
$(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=;k<$i.length;k++){
// alert(li[k]);
// }
})
})
})
</script>
</body>
</html>

jQuery模仿阿里云购买服务器选择购买时间长度的代码到此就写完了,代码比较简单就没写注释,如果大家有疑问欢迎给我留言,小编会及时给大家回复的!

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
Vue中keep-alive组件作用详解
Feb 04 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
JavaScript函数柯里化详解
Apr 29 #Javascript
easyui validatebox验证
Apr 29 #Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 #Javascript
Bootstrap模态对话框的简单使用
Apr 29 #Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 #Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 #Javascript
You might like
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php 禁止页面缓存输出
2009/01/07 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
python实现神经网络感知器算法
2017/12/20 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python写日志文件操作类与应用示例
2019/07/01 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Django在Model保存前记录日志实例
2020/05/14 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
公司联欢晚会主持词
2014/03/22 职场文书
中标通知书
2015/04/17 职场文书
python中的sys模块和os模块
2022/03/20 Python