欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery模仿阿里云購(gòu)買(mǎi)服務(wù)器選擇購(gòu)買(mǎi)時(shí)間長(zhǎng)度的代碼

 更新時(shí)間：2016年04月29日 10:12:22   作者：roucheng  
jQuery仿阿里云購(gòu)買(mǎi)服務(wù)器選擇時(shí)間長(zhǎng)度,操作簡(jiǎn)單，只需點(diǎn)擊所要選的時(shí)間段，對(duì)實(shí)現(xiàn)代碼感興趣的朋友參考下

jQuery仿阿里云購(gòu)買(mǎi)服務(wù)器選擇時(shí)間長(zhǎng)度,操作簡(jiǎn)單，只需點(diǎn)擊所要選的時(shí)間段。下面給大家展示下效果圖，就什么都明白了，如果大家覺(jué)得不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼。

效果圖如下：

代碼：

<!doctype html>
<html lang="en">
<head>
<!-- 效果：http://hovertree.com/texiao/jquery// -->
<meta charset="UTF-">
<title>jQuery點(diǎn)擊選擇購(gòu)買(mǎi)年月時(shí)長(zhǎng) - 何問(wèn)起</title><base target="_blank" />
<meta name="author" content="何問(wèn)起" />
<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點(diǎn)擊選擇購(gòu)買(mǎi)年月時(shí)長(zhǎng)</h><a >原文</a>
<a  target="_blank">首頁(yè)</a>
<a  target="_blank">特效</a>
</div>
<div>
<ul class="hovertreeBar clear" id="hovertreeindex">
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)個(gè)月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)年</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)年</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>購(gòu)買(mǎi)年</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模仿阿里云購(gòu)買(mǎi)服務(wù)器選擇購(gòu)買(mǎi)時(shí)間長(zhǎng)度的代碼到此就寫(xiě)完了，代碼比較簡(jiǎn)單就沒(méi)寫(xiě)注釋?zhuān)绻蠹矣幸蓡?wèn)歡迎給我留言，小編會(huì)及時(shí)給大家回復(fù)的！

相關(guān)文章

最新評(píng)論