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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
浅谈javascript的闭包
Jan 23 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
js仿淘宝放大镜效果
Dec 28 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/ZendEngine2的改进
2006/10/09 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP递归的三种常用方式
2019/02/28 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python实现浪漫的烟花秀
2019/01/30 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
初三物理教学反思
2014/01/21 职场文书
采购经理岗位职责
2014/02/16 职场文书
小学语文国培感言
2014/03/04 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
2015年林业工作总结
2015/05/14 职场文书
python全面解析接口返回数据
2022/02/12 Python
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python