HTML+CSS3 纯代码实现转盘效果
摘要：纯代码实现,没有引用一张图片,当然还是有改进的地方的
0001 | 1 <!DOCTYPE html> |
0002 | <html> |
0003 | <head> |
0004 | <meta charset="utf-8"> |
0005 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
0006 | <title></title> |
0007 | <script src="/Scripts/jquery-1.10.2.min.js"></script> |
0008 |
0009 | <link rel="stylesheet" href=""> |
0010 | <style> |
0011 | *{ |
0012 | padding:0; |
0013 | margin:0; |
0014 | font: 24px/24px "Microsoft Yahei"; |
0015 | color:white; |
0016 | } |
0017 | body{ |
0018 | background:#202020; |
0019 | } |
0020 | .main{ |
0021 | width: 1520px; |
0022 | height:900px; |
0023 | background:#06192A; |
0024 | margin:0 auto; |
0025 | border:2px solid white; |
0026 | } |
0027 | .main header{ |
0028 | height: 150px; |
0029 | border-bottom:2px solid #637382; |
0030 | } |
0031 | .main header h1{ |
0032 | text-align:center; |
0033 | font-weight:bolder; |
0034 | position: relative; |
0035 | bottom:0; |
0036 | padding-top: 104px; |
0037 | } |
0038 | .main section{ |
0039 | width:1350px; |
0040 | /*border-bottom:2px solid #637382;*/ |
0041 | margin:0 auto; |
0042 | /*padding-top:50px; |
0043 | padding-left:98.5px;*/ |
0044 |
0045 | display:inline-block; |
0046 | padding-top: 50px; |
0047 | padding-left: 170px; |
0048 | } |
0049 |
0050 | .main section .round{ |
0051 | width:300px; |
0052 | height:300px; |
0053 | position: relative; |
0054 | /*background:gray;*/ |
0055 | border-radius:50%; |
0056 |
0057 | margin-right: 150px; |
0058 | margin-bottom: 30px; |
0059 | float:left; |
0060 | } |
0061 |
0062 | .main section .round ul{ |
0063 | list-style: none; |
0064 | margin: 0; |
0065 | padding: 0; |
0066 | } |
0067 |
0068 | .main section .round ul.mark li{ |
0069 | width:2px; |
0070 | height:18px; |
0071 | display:block; |
0072 | background:white; |
0073 | position: absolute; |
0074 | top:50%; |
0075 | left:50%; |
0076 | } |
0077 |
0078 | .main section .round ul.mark li:nth-child(odd){ |
0079 | height:26px; |
0080 | top: calc(50% - 4px); |
0081 | } |
0082 |
0083 | .digits::before{ |
0084 | width: 34px; |
0085 | height: 34px; |
0086 | position: absolute; |
0087 | border-radius:50%; |
0088 | top:calc(50% - 8px); |
0089 | left:calc(50% - 17px); |
0090 | content:""; |
0091 | background:#003951; |
0092 | } |
0093 |
0094 | .digits::after{ |
0095 | position: absolute; |
0096 | top: 181px; |
0097 | left: 137px; |
0098 | content:"MPH"; |
0099 | font-size:12px; |
0100 | font-weight:lighter; |
0101 | opacity:0.5; |
0102 | } |
0103 |
0104 | .main section .round ul.digits li{ |
0105 | font-size: 20px; |
0106 | display: block; |
0107 | position: absolute; |
0108 | top: 50%; |
0109 | left: 50%; |
0110 | line-height: 20px; |
0111 | text-align: center; |
0112 | font-weight: lighter; |
0113 | } |
0114 |
0115 | .main section .round ul.digits li:nth-child(1){ |
0116 | transform: translate(-93px, 35px); |
0117 | } |
0118 | .main section .round ul.digits li:nth-child(2){ |
0119 | transform: translate(-95px, -25px); |
0120 | } |
0121 | .main section .round ul.digits li:nth-child(3){ |
0122 | transform: translate(-65px, -70px); |
0123 | } |
0124 | .main section .round ul.digits li:nth-child(4){ |
0125 | transform: translate(-18px, -90px); |
0126 | } |
0127 | .main section .round ul.digits li:nth-child(5){ |
0128 | transform: translate(45px, -70px); |
0129 | } |
0130 | .main section .round ul.digits li:nth-child(6){ |
0131 | transform: translate(60px, -25px); |
0132 | } |
0133 | .main section .round ul.digits li:nth-child(7){ |
0134 | transform: translate(68px, 35px); |
0135 | } |
0136 |
0137 | .main section .round .hand{ |
0138 | width: .2em; |
0139 | height: .2em; |
0140 | background: #c00; |
0141 | border-radius: 50%; |
0142 | position: absolute; |
0143 | top: 157px; |
0144 | left: 148px; |
0145 | |
0146 | -webkit-transition: all 1s linear; |
0147 | -moz-transition: all 1s linear; |
0148 | -ms-transition: all 1s linear; |
0149 | -o-transition: all 1s linear; |
0150 | transition: all 1s linear; |
0151 |
0152 | -webkit-transform: rotate(0deg); |
0153 | -moz-transform: rotate(0deg); |
0154 | transform: rotate(0deg); |
0155 | box-shadow: rgba(0, 0, 0, .8) 0 0 .2em; |
0156 | } |
0157 |
0158 | .main section .round .hand:before{ |
0159 | content: ""; |
0160 | width: .2em; |
0161 | height: 128px; |
0162 | border-radius: .2em .2em 0 0/10em 10em 0 0; |
0163 | background: #c00; |
0164 | position: absolute; |
0165 | top: -127px; |
0166 | left: .1em; |
0167 | margin: 0 0 -2em -.1em; |
0168 | } |
0169 |
0170 | .main section .round .digital{ |
0171 | position: absolute; |
0172 | top: 225px; |
0173 | left: 76px; |
0174 | } |
0175 |
0176 | .main section .round .digital input,.main section .round .digital ul{ |
0177 | float:left; |
0178 | } |
0179 |
0180 | .main section .round .digital ul{ |
0181 | width:20px; |
0182 | height: 30px; |
0183 | color: #ddd; |
0184 | font-family: Consolas, monaco, monospace; |
0185 | background:#000009; |
0186 | margin:0 1px !important; |
0187 | text-align:center; |
0188 | overflow:hidden; |
0189 | position: relative; |
0190 | } |
0191 |
0192 | .main section .round .digital ul li{ |
0193 | width:18px; |
0194 | height:26px; |
0195 | margin-top:2px; |
0196 | background:#1A2730; |
0197 | /*font-weight:lighter;*/ |
0198 | position: relative; |
0199 | overflow:hidden; |
0200 | margin-left:1px; |
0201 | } |
0202 |
0203 | .main section .round .digital ul.mph,.main section .round .digital ul.mph li{ |
0204 | background:none; |
0205 | cursor: pointer; |
0206 | overflow:visible; |
0207 | } |
0208 |
0209 | .main section .round .digital ul.mph li{ |
0210 | height: 30px; |
0211 | margin-top:0; |
0212 | } |
0213 |
0214 | .main section .round .digital ul.mph b,.main section .round .digital ul.mph b:before,.main section .round .digital ul.mph span{ |
0215 | display:block; |
0216 | position: relative; |
0217 | } |
0218 | .main section .round .digital ul.mph b{ |
0219 | width:16px; |
0220 | height:16px; |
0221 | border-radius:8px; |
0222 | background:white; |
0223 | top:-2px; |
0224 | margin-left:2px; |
0225 | } |
0226 |
0227 | .main section .round .digital ul.mph b.selected:before{ |
0228 | background:red; |
0229 | width:12px; |
0230 | height: 12px; |
0231 | content:""; |
0232 | border-radius:6px; |
0233 | top:2px; |
0234 | left:2px; |
0235 | } |
0236 |
0237 | .main section .round .digital ul.mph span{ |
0238 | width:20px; |
0239 | height:15px; |
0240 | font-size:12px; |
0241 | top:-6px; |
0242 | } |
0243 |
0244 | .main section .round .digital ul.mph:first-child{ |
0245 | margin-right: 10px !important; |
0246 | } |
0247 |
0248 | .main section .round .digital ul.mph:last-child{ |
0249 | margin-left: 10px !important; |
0250 | } |
0251 |
0252 | .main section .round p{ |
0253 | position: absolute; |
0254 | bottom:10px; |
0255 | text-align:center; |
0256 | width: 100%; |
0257 | font-size:21px; |
0258 | } |
0259 |
0260 | .main section .round .digital ul li span { |
0261 | width: 20px; |
0262 | height: 26px; |
0263 | display: block; |
0264 | position: relative; |
0265 | top: -234px; |
0266 | } |
0267 |
0268 | .main section .round .digital ul.d4/*:nth-child(4)*/ li{ |
0269 | /* -webkit-transition: all 1s linear; |
0270 | -moz-transition: all 1s linear; |
0271 | -ms-transition: all 1s linear; |
0272 | -o-transition: all 1s linear; |
0273 | transition: all 1s linear;*/ |
0274 | } |
0275 |
0276 | #r1 .digital ul.d4 li{ |
0277 | top: -252px; |
0278 | } |
0279 |
0280 | #r2 .digital ul.d4 li{ |
0281 | top: -168px; |
0282 | } |
0283 |
0284 | #r3 .digital ul.d4 li{ |
0285 | top: -140px; |
0286 | } |
0287 |
0288 | #r4 .digital ul.d3 li{ |
0289 | top: -84px; |
0290 | } |
0291 |
0292 | #r4 .digital ul.d4 li{ |
0293 | top: -112px; |
0294 | } |
0295 |
0296 | #r5 .digital ul.d4 li{ |
0297 | top: -112px; |
0298 | } |
0299 |
0300 | #r6 .digital ul.d4 li{ |
0301 | top: -224px; |
0302 | } |
0303 | </style> |
0304 | </head> |
0305 | <body> |
0306 | <div class="main"> |
0307 | <header> |
0308 | <h1>心血管医用气体</h1> |
0309 | </header> |
0310 | <section> |
0311 | <div class="round" id="r1" data-value="0.42"> |
0312 | <ul class="mark"> |
0313 | <li></li> |
0314 | <li></li> |
0315 | <li></li> |
0316 | <li></li> |
0317 | <li></li> |
0318 | <li></li> |
0319 | <li></li> |
0320 | <li></li> |
0321 | <li></li> |
0322 | <li></li> |
0323 | <li></li> |
0324 | <li></li> |
0325 | <li></li> |
0326 | <li></li> |
0327 | <li></li> |
0328 | <li></li> |
0329 | <li></li> |
0330 | <li></li> |
0331 | <li></li> |
0332 | <li></li> |
0333 | <li></li> |
0334 | <li></li> |
0335 | <li></li> |
0336 | <li></li> |
0337 | <li></li> |
0338 | </ul> |
0339 | <ul class="digits"> |
0340 | <li>0.3</li> |
0341 | <li>0.35</li> |
0342 | <li>0.4</li> |
0343 | <li>0.45</li> |
0344 | <li>0.5</li> |
0345 | <li>0.55</li> |
0346 | <li>0.6</li> |
0347 | </ul> |
0348 | <div class="hand"></div> |
0349 | <div class="digital"> |
0350 | <ul class="mph"> |
0351 | <li> |
0352 | <b id="low" data-id="0"></b> |
0353 | <span for="low">低</span> |
0354 | </li> |
0355 | </ul> |
0356 | <ul> |
0357 | <li>0</li> |
0358 | </ul> |
0359 | <ul> |
0360 | <li>.</li> |
0361 | </ul> |
0362 | <ul> |
0363 | <li>4</li> |
0364 | </ul> |
0365 | <ul class="d4"> |
0366 | <li>9</li> |
0367 | <li>8</li> |
0368 | <li>7</li> |
0369 | <li>6</li> |
0370 | <li>5</li> |
0371 | <li>4</li> |
0372 | <li>3</li> |
0373 | <li>2</li> |
0374 | <li>1</li> |
0375 | <li>0</li> |
0376 | </ul> |
0377 | <ul class="mph"> |
0378 | <li> |
0379 | <b class="selected" id="hight" data-id="1"></b> |
0380 | <span for="hight">高</span> |
0381 | </li> |
0382 | </ul> |
0383 | </div> |
0384 | <p>氧气区域管线压力</p> |
0385 | </div> |
0386 | <div class="round" id="r2" data-value="0.43"> |
0387 | <ul class="mark"> |
0388 | <li></li> |
0389 | <li></li> |
0390 | <li></li> |
0391 | <li></li> |
0392 | <li></li> |
0393 | <li></li> |
0394 | <li></li> |
0395 | <li></li> |
0396 | <li></li> |
0397 | <li></li> |
0398 | <li></li> |
0399 | <li></li> |
0400 | <li></li> |
0401 | <li></li> |
0402 | <li></li> |
0403 | <li></li> |
0404 | <li></li> |
0405 | <li></li> |
0406 | <li></li> |
0407 | <li></li> |
0408 | <li></li> |
0409 | <li></li> |
0410 | <li></li> |
0411 | <li></li> |
0412 | <li></li> |
0413 | </ul> |
0414 | <ul class="digits"> |
0415 | <li>0.3</li> |
0416 | <li>0.35</li> |
0417 | <li>0.4</li> |
0418 | <li>0.45</li> |
0419 | <li>0.5</li> |
0420 | <li>0.55</li> |
0421 | <li>0.6</li> |
0422 | </ul> |
0423 | <div class="hand"></div> |
0424 | <div class="digital"> |
0425 | <ul class="mph"> |
0426 | <li> |
0427 | <b id="low" data-id="0"></b> |
0428 | <span for="low">低</span> |
0429 | </li> |
0430 | </ul> |
0431 | <ul> |
0432 | <li>0</li> |
0433 | </ul> |
0434 | <ul> |
0435 | <li>.</li> |
0436 | </ul> |
0437 | <ul> |
0438 | <li>4</li> |
0439 | </ul> |
0440 | <ul class="d4"> |
0441 | <li>9</li> |
0442 | <li>8</li> |
0443 | <li>7</li> |
0444 | <li>6</li> |
0445 | <li>5</li> |
0446 | <li>4</li> |
0447 | <li>3</li> |
0448 | <li>2</li> |
0449 | <li>1</li> |
0450 | <li>0</li> |
0451 | </ul> |
0452 | <ul class="mph"> |
0453 | <li> |
0454 | <b class="selected" id="hight" data-id="1"></b> |
0455 | <span for="hight">高</span> |
0456 | </li> |
0457 | </ul> |
0458 | </div> |
0459 | <p>压缩空气区域管线压力</p> |
0460 | </div> |
0461 | <div class="round" id="r3" data-value="0.44"> |
0462 | <ul class="mark"> |
0463 | <li></li> |
0464 | <li></li> |
0465 | <li></li> |
0466 | <li></li> |
0467 | <li></li> |
0468 | <li></li> |
0469 | <li></li> |
0470 | <li></li> |
0471 | <li></li> |
0472 | <li></li> |
0473 | <li></li> |
0474 | <li></li> |
0475 | <li></li> |
0476 | <li></li> |
0477 | <li></li> |
0478 | <li></li> |
0479 | <li></li> |
0480 | <li></li> |
0481 | <li></li> |
0482 | <li></li> |
0483 | <li></li> |
0484 | <li></li> |
0485 | <li></li> |
0486 | <li></li> |
0487 | <li></li> |
0488 | </ul> |
0489 | <ul class="digits"> |
0490 | <li>0.3</li> |
0491 | <li>0.35</li> |
0492 | <li>0.4</li> |
0493 | <li>0.45</li> |
0494 | <li>0.5</li> |
0495 | <li>0.55</li> |
0496 | <li>0.6</li> |
0497 | </ul> |
0498 | <div class="hand"></div> |
0499 | <div class="digital"> |
0500 | <ul class="mph"> |
0501 | <li> |
0502 | <b id="low" data-id="0"></b> |
0503 | <span for="low">低</span> |
0504 | </li> |
0505 | </ul> |
0506 | <ul> |
0507 | <li>0</li> |
0508 | </ul> |
0509 | <ul> |
0510 | <li>.</li> |
0511 | </ul> |
0512 | <ul> |
0513 | <li>4</li> |
0514 | </ul> |
0515 | <ul class="d4"> |
0516 | <li>9</li> |
0517 | <li>8</li> |
0518 | <li>7</li> |
0519 | <li>6</li> |
0520 | <li>5</li> |
0521 | <li>4</li> |
0522 | <li>3</li> |
0523 | <li>2</li> |
0524 | <li>1</li> |
0525 | <li>0</li> |
0526 | </ul> |
0527 | <ul class="mph"> |
0528 | <li> |
0529 | <b class="selected" id="hight" data-id="1"></b> |
0530 | <span for="hight">高</span> |
0531 | </li> |
0532 | </ul> |
0533 | </div> |
0534 | <p>CO2区域管线压力</p> |
0535 | </div> |
0536 | <div class="round" id="r4" data-value="0066"> |
0537 | <ul class="mark"> |
0538 | <li></li> |
0539 | <li></li> |
0540 | <li></li> |
0541 | <li></li> |
0542 | <li></li> |
0543 | <li></li> |
0544 | <li></li> |
0545 | <li></li> |
0546 | <li></li> |
0547 | <li></li> |
0548 | <li></li> |
0549 | <li></li> |
0550 | <li></li> |
0551 | <li></li> |
0552 | <li></li> |
0553 | <li></li> |
0554 | <li></li> |
0555 | <li></li> |
0556 | <li></li> |
0557 | <li></li> |
0558 | <li></li> |
0559 | <li></li> |
0560 | <li></li> |
0561 | <li></li> |
0562 | <li></li> |
0563 | </ul> |
0564 | <ul class="digits"> |
0565 | <li>30</li> |
0566 | <li>40</li> |
0567 | <li>50</li> |
0568 | <li style="transform:translate(-10px, -90px);">60</li> |
0569 | <li>70</li> |
0570 | <li style="transform:translate(75px, -25px);">80</li> |
0571 | <li style="transform:translate(72px, 35px);">90</li> |
0572 | </ul> |
0573 | <div class="hand"></div> |
0574 | <div class="digital"> |
0575 | <ul class="mph"> |
0576 | <li> |
0577 | <b id="low" data-id="0"></b> |
0578 | <span for="low">低</span> |
0579 | </li> |
0580 | </ul> |
0581 | <ul> |
0582 | <li>0</li> |
0583 | </ul> |
0584 | <ul> |
0585 | <li>0</li> |
0586 | </ul> |
0587 | <ul class="d3"> |
0588 | <li>9</li> |
0589 | <li>8</li> |
0590 | <li>7</li> |
0591 | <li>6</li> |
0592 | <li>5</li> |
0593 | <li>4</li> |
0594 | <li>3</li> |
0595 | <li>2</li> |
0596 | <li>1</li> |
0597 | <li>0</li> |
0598 | </ul> |
0599 | <ul class="d4"> |
0600 | <li>9</li> |
0601 | <li>8</li> |
0602 | <li>7</li> |
0603 | <li>6</li> |
0604 | <li>5</li> |
0605 | <li>4</li> |
0606 | <li>3</li> |
0607 | <li>2</li> |
0608 | <li>1</li> |
0609 | <li>0</li> |
0610 | </ul> |
0611 | <ul class="mph"> |
0612 | <li> |
0613 | <b class="selected" id="hight" data-id="1"></b> |
0614 | <span for="hight">高</span> |
0615 | </li> |
0616 | </ul> |
0617 | </div> |
0618 | <p>真空区域管线压力</p> |
0619 | </div> |
0620 | <div class="round" id="r5" data-value="0.45"> |
0621 | <ul class="mark"> |
0622 | <li></li> |
0623 | <li></li> |
0624 | <li></li> |
0625 | <li></li> |
0626 | <li></li> |
0627 | <li></li> |
0628 | <li></li> |
0629 | <li></li> |
0630 | <li></li> |
0631 | <li></li> |
0632 | <li></li> |
0633 | <li></li> |
0634 | <li></li> |
0635 | <li></li> |
0636 | <li></li> |
0637 | <li></li> |
0638 | <li></li> |
0639 | <li></li> |
0640 | <li></li> |
0641 | <li></li> |
0642 | <li></li> |
0643 | <li></li> |
0644 | <li></li> |
0645 | <li></li> |
0646 | <li></li> |
0647 | </ul> |
0648 | <ul class="digits"> |
0649 | <li>0.3</li> |
0650 | <li>0.35</li> |
0651 | <li>0.4</li> |
0652 | <li>0.45</li> |
0653 | <li>0.5</li> |
0654 | <li>0.55</li> |
0655 | <li>0.6</li> |
0656 | </ul> |
0657 | <div class="hand"></div> |
0658 | <div class="digital"> |
0659 | <ul class="mph"> |
0660 | <li> |
0661 | <b id="low" data-id="0"></b> |
0662 | <span for="low">低</span> |
0663 | </li> |
0664 | </ul> |
0665 | <ul> |
0666 | <li>0</li> |
0667 | </ul> |
0668 | <ul> |
0669 | <li>.</li> |
0670 | </ul> |
0671 | <ul> |
0672 | <li>4</li> |
0673 | </ul> |
0674 | <ul class="d4"> |
0675 | <li>9</li> |
0676 | <li>8</li> |
0677 | <li>7</li> |
0678 | <li>6</li> |
0679 | <li>5</li> |
0680 | <li>4</li> |
0681 | <li>3</li> |
0682 | <li>2</li> |
0683 | <li>1</li> |
0684 | <li>0</li> |
0685 | </ul> |
0686 | <ul class="mph"> |
0687 | <li> |
0688 | <b class="selected" id="hight" data-id="1"></b> |
0689 | <span for="hight">高</span> |
0690 | </li> |
0691 | </ul> |
0692 | </div> |
0693 | <p>笑气区域管线压力</p> |
0694 | </div> |
0695 | <div class="round" id="r6" data-value="0.51"> |
0696 | <ul class="mark"> |
0697 | <li></li> |
0698 | <li></li> |
0699 | <li></li> |
0700 | <li></li> |
0701 | <li></li> |
0702 | <li></li> |
0703 | <li></li> |
0704 | <li></li> |
0705 | <li></li> |
0706 | <li></li> |
0707 | <li></li> |
0708 | <li></li> |
0709 | <li></li> |
0710 | <li></li> |
0711 | <li></li> |
0712 | <li></li> |
0713 | <li></li> |
0714 | <li></li> |
0715 | <li></li> |
0716 | <li></li> |
0717 | <li></li> |
0718 | <li></li> |
0719 | <li></li> |
0720 | <li></li> |
0721 | <li></li> |
0722 | </ul> |
0723 | <ul class="digits"> |
0724 | <li>0.3</li> |
0725 | <li>0.35</li> |
0726 | <li>0.4</li> |
0727 | <li>0.45</li> |
0728 | <li>0.5</li> |
0729 | <li>0.55</li> |
0730 | <li>0.6</li> |
0731 | </ul> |
0732 | <div class="hand"></div> |
0733 | <div class="digital"> |
0734 | <ul class="mph"> |
0735 | <li> |
0736 | <b id="low" data-id="0"></b> |
0737 | <span for="low">低</span> |
0738 | </li> |
0739 | </ul> |
0740 | <ul> |
0741 | <li>0</li> |
0742 | </ul> |
0743 | <ul> |
0744 | <li>.</li> |
0745 | </ul> |
0746 | <ul> |
0747 | <li>5</li> |
0748 | </ul> |
0749 | <ul class="d4"> |
0750 | <li>9</li> |
0751 | <li>8</li> |
0752 | <li>7</li> |
0753 | <li>6</li> |
0754 | <li>5</li> |
0755 | <li>4</li> |
0756 | <li>3</li> |
0757 | <li>2</li> |
0758 | <li>1</li> |
0759 | <li>0</li> |
0760 | </ul> |
0761 | <ul class="mph"> |
0762 | <li> |
0763 | <b class="selected" id="hight" data-id="1"></b> |
0764 | <span for="hight">高</span> |
0765 | </li> |
0766 | </ul> |
0767 | </div> |
0768 | <p>氮气区域管线压力</p> |
0769 | </div> |
0770 | </section> |
0771 | </div> |
0772 | </body> |
0773 | <script> |
0774 | $(".round").each(function(){ |
0775 | var deg = -110; |
0776 | $(this).find("ul.mark li").each(function(){ |
0777 | var ty = "-120px"; |
0778 | if($(this).index() % 2 == 0){ |
0779 | ty = "-115px"; |
0780 | } |
0781 |
0782 | $(this).css("transform","rotate("+deg+"deg) translateY("+ty+")"); |
0783 | deg += 220 / 24; |
0784 | }); |
0785 | }); |
0786 |
0787 | $(".digital").find("ul:not(.mph):last").click(function(){ |
0788 | |
0789 | }); |
0790 |
0791 | function getDeg(num){ |
0792 | return -110 + 220 / 24 * (num - 1); |
0793 | } |
0794 |
0795 | var dig = 28; |
0796 | //---------r1--------- |
0797 | var r1_deg = getDeg(9); |
0798 | $("#r1").find(".hand") |
0799 | .css("transform","rotate("+r1_deg+"deg)"); |
0800 |
0801 | var r1_status = false; |
0802 |
0803 | setTimeout(function(){ |
0804 | var r1 = $("#r1"); |
0805 |
0806 | r1_status = null; |
0807 |
0808 | var new_r1_deg = getDeg(13) |
0809 |
0810 | r1.find(".hand").css("transform","rotate("+new_r1_deg+"deg)"); |
0811 | var num = r1.find(".d4 li").css("top"); |
0812 |
0813 | num = num.substring(0,num.length - 2); |
0814 |
0815 | //r1.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px"); |
0816 | r1.find(".d4 li").animate({ |
0817 | top: parseInt(num) + 28 * 5 + "px" |
0818 | },1500); |
0819 | }, 3000); |
0820 |
0821 | setTimeout(function(){ |
0822 | r1_status = true; |
0823 | },5000); |
0824 |
0825 | setInterval(function(){ |
0826 | if(r1_status == null){return;} |
0827 |
0828 | var r1 = $("#r1").find(".hand")[0]; |
0829 |
0830 | var r1_deg = r1.style.cssText; |
0831 |
0832 | var n = r1_deg.substring(18,r1_deg.length - 5); |
0833 |
0834 | n = r1_status ? parseFloat(n) + 2 : parseFloat(n) - 2; |
0835 |
0836 | r1.style.cssText = "transform:rotate("+n+"deg)"; |
0837 |
0838 | r1_status = !r1_status; |
0839 | },500); |
0840 |
0841 | //---------r2--------- |
0842 | $("#r2").find(".hand") |
0843 | .css("transform","rotate(-12.5deg)"); |
0844 |
0845 | var r2_status = false; |
0846 |
0847 | setTimeout(function(){ |
0848 | var r2 = $("#r2"); |
0849 |
0850 | r2_status = null; |
0851 |
0852 | var new_r2_deg = getDeg(9) |
0853 |
0854 | r2.find(".hand").css("transform","rotate("+new_r2_deg+"deg)"); |
0855 | var num = r2.find(".d4 li").css("top"); |
0856 |
0857 | num = num.substring(0,num.length - 2); |
0858 |
0859 | //r2.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px"); |
0860 | r2.find(".d4 li").animate({ |
0861 | top: parseInt(num) - 28 * 3 + "px" |
0862 | },1500); |
0863 | }, 5000); |
0864 |
0865 | setTimeout(function(){ |
0866 | r2_status = true; |
0867 | },6000); |
0868 |
0869 | setInterval(function(){ |
0870 | if(r2_status == null){return;} |
0871 |
0872 | var r2 = $("#r2").find(".hand")[0]; |
0873 |
0874 | var r2_deg = r2.style.cssText; |
0875 |
0876 | var n = r2_deg.substring(18,r2_deg.length - 5); |
0877 |
0878 | n = r2_status ? parseFloat(n) + 2 : parseFloat(n) - 2; |
0879 |
0880 | r2.style.cssText = "transform:rotate("+n+"deg)"; |
0881 |
0882 | r2_status = !r2_status; |
0883 | },500); |
0884 |
0885 | //---------r3--------- |
0886 | $("#r3").find(".hand") |
0887 | .css("transform","rotate(-3.9deg)"); |
0888 |
0889 | var r3_status = false; |
0890 | //* |
0891 | setInterval(function(){ |
0892 | if(r3_status == null){return;} |
0893 |
0894 | var r3 = $("#r3").find(".hand")[0]; |
0895 |
0896 | var r3_deg = r3.style.cssText; |
0897 |
0898 | var n = r3_deg.substring(18,r3_deg.length - 5); |
0899 |
0900 | n = r3_status ? parseFloat(n) + 2 : parseFloat(n) - 2; |
0901 |
0902 | r3.style.cssText = "transform:rotate("+n+"deg)"; |
0903 |
0904 | r3_status = !r3_status; |
0905 | },500);//*/ |
0906 |
0907 | //---------r4--------- |
0908 | var r4_deg = getDeg(15); |
0909 | $("#r4").find(".hand") |
0910 | .css("transform","rotate("+r4_deg+"deg)"); |
0911 |
0912 | var r4_status = true; |
0913 |
0914 | setTimeout(function(){ |
0915 | var r4 = $("#r4"); |
0916 |
0917 | r4_status = null; |
0918 |
0919 | var new_r4_deg = getDeg(17) |
0920 |
0921 | r4.find(".hand").css("transform","rotate("+new_r4_deg+"deg)"); |
0922 |
0923 | var num = r4.find(".d4 li").css("top"); |
0924 | num = num.substring(0,num.length - 2); |
0925 |
0926 | //r4.find(".d4 li").css("top",parseInt(num) + 28 * i + "px"); |
0927 |
0928 | r4.find(".d4 li").animate({ |
0929 | top: parseInt(num) + 28 * 4 + "px" |
0930 | },1000, function() { |
0931 | var d3 = r4.find(".d3 li").css("top"); |
0932 | d3 = d3.substring(0,d3.length - 2); |
0933 |
0934 | r4.find(".d4 li").stop(); |
0935 | r4.find(".d4 li").css("top","-252px"); |
0936 |
0937 | r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px"); |
0938 |
0939 | r4_status = false; |
0940 | }); |
0941 | }, 7000); |
0942 | /* |
0943 | setTimeout(function(){ |
0944 | var r4 = $("#r4"); |
0945 | var d3 = r4.find(".d3 li").css("top"); |
0946 | d3 = d3.substring(0,d3.length - 2); |
0947 |
0948 | r4.find(".d4 li").stop(); |
0949 | r4.find(".d4 li").css("top","-252px"); |
0950 |
0951 | r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px"); |
0952 | }, 6000); |
0953 | */ |
0954 | //* |
0955 | setInterval(function(){ |
0956 | if(r4_status == null){return;} |
0957 |
0958 | var r4 = $("#r4").find(".hand")[0]; |
0959 |
0960 | var r4_deg = r4.style.cssText; |
0961 |
0962 | var n = r4_deg.substring(18,r4_deg.length - 5); |
0963 |
0964 | n = r4_status ? parseFloat(n) + 2 : parseFloat(n) - 2; |
0965 |
0966 | r4.style.cssText = "transform:rotate("+n+"deg)"; |
0967 |
0968 | r4_status = !r4_status; |
0969 | },500);//*/ |
0970 |
0971 | var r5_deg = getDeg(13); |
0972 | $("#r5").find(".hand") |
0973 | .css("transform","rotate("+r5_deg+"deg)"); |
0974 | var r5_status = false; |
0975 | //* |
0976 | setInterval(function(){ |
0977 | if(r5_status == null){return;} |
0978 |
0979 | var r5 = $("#r5").find(".hand")[0]; |
0980 |
0981 | var r5_deg = r5.style.cssText; |
0982 |
0983 | var n = r5_deg.substring(18,r5_deg.length - 5); |
0984 |
0985 | n = r5_status ? parseFloat(n) + 2 : parseFloat(n) - 2; |
0986 |
0987 | r5.style.cssText = "transform:rotate("+n+"deg)"; |
0988 |
0989 | r5_status = !r5_status; |
0990 | },500);//*/ |
0991 |
0992 | var r6_deg = getDeg(17); |
0993 | $("#r6").find(".hand") |
0994 | .css("transform","rotate(42.666667deg)"); |
0995 | var r6_status = false; |
0996 |
0997 | setTimeout(function(){ |
0998 | var r6 = $("#r6"); |
0999 |
1000 | r6_status = null; |
1001 |
1002 | var new_r6_deg = getDeg(21) |
1003 |
1004 | r6.find(".hand").css("transform","rotate("+new_r6_deg+"deg)"); |
1005 | var num = r6.find(".d4 li").css("top"); |
1006 |
1007 | num = num.substring(0,num.length - 2); |
1008 |
1009 | //r6.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px"); |
1010 | r6.find(".d4 li").animate({ |
1011 | top: parseInt(num) + 28 * 4 + "px" |
1012 | },1500); |
1013 | }, 9000); |
1014 |
1015 | setTimeout(function(){ |
1016 | r6_status = true; |
1017 | },10000); |
1018 | //* |
1019 | setInterval(function(){ |
1020 | if(r6_status == null){return;} |
1021 |
1022 | var r6 = $("#r6").find(".hand")[0]; |
1023 |
1024 | var r6_deg = r6.style.cssText; |
1025 |
1026 | var n = r6_deg.substring(18,r6_deg.length - 5); |
1027 |
1028 | n = r6_status ? parseFloat(n) + 2 : parseFloat(n) - 2; |
1029 |
1030 | r6.style.cssText = "transform:rotate("+n+"deg)"; |
1031 |
1032 | r6_status = !r6_status; |
1033 | },500);//*/ |
1034 | </script> |
1035 | </html> |
相关文章
最新发布
阅读排行
热门文章
猜你喜欢