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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
VUE中使用MUI方法
Feb 12 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
详解js的六大数据类型
2016/12/27 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Django如何实现防止XSS攻击
2020/10/13 Python
pandas针对excel处理的实现
2021/01/15 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
即兴演讲稿
2014/01/04 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
上班上网检讨书
2014/01/29 职场文书
高级销售求职信
2014/02/21 职场文书
2014年维修工作总结
2014/11/22 职场文书
保管员岗位职责
2015/02/14 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
入党自传范文2015
2015/06/26 职场文书
保护环境的宣传语
2015/07/13 职场文书