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编程起步(第五课)
Feb 27 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
天津市收音机工业发展史
2021/03/04 无线电
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python实现音乐下载的统计
2018/06/20 Python
python实现图片筛选程序
2018/10/24 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
毕业生的自我评价
2013/12/30 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
销售内勤岗位职责
2015/02/10 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
移除Selenium中window.navigator.webdriver值
2022/06/10 Python