首页 何问起 前端特效 htbtn-4 闪电 使用方法

jQuery仿阿里云购买选择购买时间长度

效果：http://hovertree.com/texiao/jquery/61/


jQuery仿阿里云购买服务器选择时间长度,操作简单，只需点击所要选的时间段


代码：

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4 <!-- 效果：http://hovertree.com/texiao/jquery/61/ -->
  5 <meta charset="UTF-8">
  6 <title>jQuery点击选择购买年月时长 - 何问起</title><base target="_blank" />
  7 <meta name="author" content="何问起" />
  8 <style>
  9 /*reset部分 start*/
 10 * {
 11 padding: 0;
 12 margin: 0;
 13 }
 14  
 15 html {
 16 font-family: "Microsoft Yahei",Arial,sans-serif;
 17 font-size: 12px;
 18 }
 19  
 20 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, button, textarea, p, th, td {
 21 padding: 0;
 22 margin: 0;
 23 font-family: "Microsoft YaHei",sans-serif,Arial;
 24 }
 25  
 26 table {
 27 border-collapse: collapse;
 28 border-spacing: 0;
 29 }
 30  
 31 fieldset, img {
 32 border: 0;
 33 }
 34  
 35 a {
 36 text-decoration: none;
 37 color: #000;
 38 outline: none;
 39 }
 40  
 41 li {
 42 list-style: none;
 43 }
 44  
 45 caption, th {
 46 text-align: left;
 47 }
 48  
 49 h1, h2, h3, h4, h5, h6 {
 50 font-weight: normal;
 51 }
 52  
 53 input, button, textarea, select, optgroup, option {
 54 font-family: inherit;
 55 font-size: inherit;
 56 font-style: inherit;
 57 font-weight: inherit;
 58 outline: medium;
 59 }
 60  
 61 input, button, textarea, select {
 62 *font-size: 100%;
 63 }
 64 /*a{-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear}*/
 65 .fl {
 66 float: left;
 67 }
 68  
 69 .fr {
 70 float: right;
 71 }
 72  
 73 .clear:after {
 74 display: block;
 75 content: "clear";
 76 height: 0;
 77 clear: both;
 78 overflow: hidden;
 79 visibility: hidden;
 80 }
 81  
 82 .clear {
 83 zoom: 1;
 84 }
 85 /*reset部分 end*/
 86  
 87 .hovertreeBar {
 88 margin: 5px auto;
 89 width: 1133px;
 90 border: 1px solid #FFCC00;
 91 background: #F2F2F2;
 92 }
 93  
 94 .hovertreeBar li {
 95 position: relative;
 96 float: left;
 97 width: 80px;
 98 height: 30px;
 99 line-height: 30px;
100 border-right: 1px solid #FFCC00;
101 text-align: center;
102 }
103  
104 .hovertreeBar li:last-child {
105 border: none;
106 }
107  
108 .hovertreeBar li:hover {
109 background: #FCF8E3;
110 cursor: pointer;
111 cursor:pointer;
112 }
113  
114 .hovertreeBar li p {
115 text-align: center;
116 }
117  
118 .phovertreeindex {
119 display: none;
120 position: absolute;
121 left: 50%;
122 top: -53px;
123 margin-left: -40px;
124 width: 85px;
125 height: 30px;
126 line-height: 30px;
127 border: 1px solid #FFCC00;
128 background: #FCF8E3;
129 }
130  
131 .hovertreeBar li:hover .phovertreeindex { /*display: block;*/
132 }
133  
134 .keleyitriangle-out {
135 position: absolute;
136 right: 36px;
137 width: 0;
138 height: 0;
139 border-width: 8px;
140 border-style: solid;
141 border-color: #ffcc00 transparent transparent transparent;
142 }
143  
144 .keleyitriangle-inner {
145 position: absolute;
146 right: 37px;
147 width: 0;
148 height: 0;
149 border-width: 7px;
150 border-style: solid;
151 border-color: #FCF8E3 transparent transparent transparent;
152 }
153 .hovertreeinfo{text-align:center;}
154 </style>
155 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
156 </head>
157 <body>
158 <div class="hovertreeinfo"><h1>jQuery点击选择购买年月时长</h1><a href="http://hovertree.com/h/bjaf/njmbk43d.htm">原文</a>
159 <a href="http://hovertree.com/" target="_blank">首页</a>
160 <a href="http://hovertree.com/texiao/" target="_blank">特效</a>
161 </div>
162 <div>
163 <ul class="hovertreeBar clear" id="hovertreeindex">
164 <li>
165 1
166 <div class="phovertreeindex">
167 <div>购买1个月</div>
168 <div class="keleyitriangle-out"></div>
169 <div class="keleyitriangle-inner"></div>
170 </div>
171  
172 </li>
173 <li>
174 2
175 <div class="phovertreeindex">
176 <div>购买2个月</div>
177 <div class="keleyitriangle-out"></div>
178 <div class="keleyitriangle-inner"></div>
179 </div>
180 </li>
181 <li>
182 3
183 <div class="phovertreeindex">
184 <div>购买3个月</div>
185 <div class="keleyitriangle-out"></div>
186 <div class="keleyitriangle-inner"></div>
187 </div>
188 </li>
189 <li>
190 4
191 <div class="phovertreeindex">
192 <div>购买4个月</div>
193 <div class="keleyitriangle-out"></div>
194 <div class="keleyitriangle-inner"></div>
195 </div>
196 </li>
197 <li>
198 5
199 <div class="phovertreeindex">
200 <div>购买5个月</div>
201 <div class="keleyitriangle-out"></div>
202 <div class="keleyitriangle-inner"></div>
203 </div>
204 </li>
205 <li>
206 6
207 <div class="phovertreeindex">
208 <div>购买6个月</div>
209 <div class="keleyitriangle-out"></div>
210 <div class="keleyitriangle-inner"></div>
211 </div>
212 </li>
213 <li>
214 7
215 <div class="phovertreeindex">
216 <div>购买7个月</div>
217 <div class="keleyitriangle-out"></div>
218 <div class="keleyitriangle-inner"></div>
219 </div>
220 </li>
221 <li>
222 8
223 <div class="phovertreeindex">
224 <div>购买8个月</div>
225 <div class="keleyitriangle-out"></div>
226 <div class="keleyitriangle-inner"></div>
227 </div>
228 </li>
229 <li>
230 9
231 <div class="phovertreeindex">
232 <div>购买9个月</div>
233 <div class="keleyitriangle-out"></div>
234 <div class="keleyitriangle-inner"></div>
235 </div>
236 </li>
237 <li>
238 10
239 <div class="phovertreeindex">
240 <div>购买10个月</div>
241 <div class="keleyitriangle-out"></div>
242 <div class="keleyitriangle-inner"></div>
243 </div>
244 </li>
245 <li>
246 11
247 <div class="phovertreeindex">
248 <div>购买11个月</div>
249 <div class="keleyitriangle-out"></div>
250 <div class="keleyitriangle-inner"></div>
251 </div>
252 </li>
253 <li>
254 1年
255 <div class="phovertreeindex">
256 <div>购买1年</div>
257 <div class="keleyitriangle-out"></div>
258 <div class="keleyitriangle-inner"></div>
259 </div>
260 </li>
261 <li>
262 2年
263 <div class="phovertreeindex">
264 <div>购买2年</div>
265 <div class="keleyitriangle-out"></div>
266 <div class="keleyitriangle-inner"></div>
267 </div>
268 </li>
269 <li>
270 3年
271 <div class="phovertreeindex">
272 <div>购买3年</div>
273 <div class="keleyitriangle-out"></div>
274 <div class="keleyitriangle-inner"></div>
275 </div>
276 </li>
277 </ul>
278 </div>
279  
280 <!-- JS部分 -->
281 <script>
282  
283 var arOB = [];
284 var ULobj = $('#hovertreeindex>li');
285 for(var i=0;i<ULobj.length;i++){
286 arOB.push(ULobj[i]);
287 }
288  
289 function changeCS(ints){
290 for(var i=0;i<arOB.length;i++){
291 if( i <= ints ){
292 arOB[i].style.backgroundColor="#FCF8E3";
293 }else{
294 arOB[i].style.backgroundColor="#F2F2F2";
295 }
296  
297 }
298 }
299  
300 $(function(){
301 $("#hovertreeindex>li").each(function(){
302 $(this).click(function(){
303 $(this).children(".phovertreeindex").show();
304 $(this).siblings().children(".phovertreeindex").hide();
305 var number=$(this).index();
306 var $j=$("#hovertreeindex>li").length;
307 changeCS(number);
308 // var li=new Array([$j]);
309 // for(k=0;k<$i.length;k++){
310 // alert(li[k]);
311 // }
312 })
313 })
314 })
315 </script>
316 </body>
317 </html>

转自：http://hovertree.com/h/bjaf/njmbk43d.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

posted @ 2016-04-28 18:11  roucheng  阅读(646)  评论(0)  编辑  收藏  举报