1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Comp ...
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <script src='/images/loading.gif' data-original="http://www.cnblogs.com//Scripts/jquery-1.10.2.min.js"></script> 8 9 <link rel="stylesheet" href=""> 10 <style> 11 *{ 12 padding:0; 13 margin:0; 14 font: 24px/24px "Microsoft Yahei"; 15 color:white; 16 } 17 body{ 18 background:#202020; 19 } 20 .main{ 21 width: 1520px; 22 height:900px; 23 background:#06192A; 24 margin:0 auto; 25 border:2px solid white; 26 } 27 .main header{ 28 height: 150px; 29 border-bottom:2px solid #637382; 30 } 31 .main header h1{ 32 text-align:center; 33 font-weight:bolder; 34 position: relative; 35 bottom:0; 36 padding-top: 104px; 37 } 38 .main section{ 39 width:1350px; 40 /*border-bottom:2px solid #637382;*/ 41 margin:0 auto; 42 /*padding-top:50px; 43 padding-left:98.5px;*/ 44 45 display:inline-block; 46 padding-top: 50px; 47 padding-left: 170px; 48 } 49 50 .main section .round{ 51 width:300px; 52 height:300px; 53 position: relative; 54 /*background:gray;*/ 55 border-radius:50%; 56 57 margin-right: 150px; 58 margin-bottom: 30px; 59 float:left; 60 } 61 62 .main section .round ul{ 63 list-style: none; 64 margin: 0; 65 padding: 0; 66 } 67 68 .main section .round ul.mark li{ 69 width:2px; 70 height:18px; 71 display:block; 72 background:white; 73 position: absolute; 74 top:50%; 75 left:50%; 76 } 77 78 .main section .round ul.mark li:nth-child(odd){ 79 height:26px; 80 top: calc(50% - 4px); 81 } 82 83 .digits::before{ 84 width: 34px; 85 height: 34px; 86 position: absolute; 87 border-radius:50%; 88 top:calc(50% - 8px); 89 left:calc(50% - 17px); 90 content:""; 91 background:#003951; 92 } 93 94 .digits::after{ 95 position: absolute; 96 top: 181px; 97 left: 137px; 98 content:"MPH"; 99 font-size:12px; 100 font-weight:lighter; 101 opacity:0.5; 102 } 103 104 .main section .round ul.digits li{ 105 font-size: 20px; 106 display: block; 107 position: absolute; 108 top: 50%; 109 left: 50%; 110 line-height: 20px; 111 text-align: center; 112 font-weight: lighter; 113 } 114 115 .main section .round ul.digits li:nth-child(1){ 116 transform: translate(-93px, 35px); 117 } 118 .main section .round ul.digits li:nth-child(2){ 119 transform: translate(-95px, -25px); 120 } 121 .main section .round ul.digits li:nth-child(3){ 122 transform: translate(-65px, -70px); 123 } 124 .main section .round ul.digits li:nth-child(4){ 125 transform: translate(-18px, -90px); 126 } 127 .main section .round ul.digits li:nth-child(5){ 128 transform: translate(45px, -70px); 129 } 130 .main section .round ul.digits li:nth-child(6){ 131 transform: translate(60px, -25px); 132 } 133 .main section .round ul.digits li:nth-child(7){ 134 transform: translate(68px, 35px); 135 } 136 137 .main section .round .hand{ 138 width: .2em; 139 height: .2em; 140 background: #c00; 141 border-radius: 50%; 142 position: absolute; 143 top: 157px; 144 left: 148px; 145 146 -webkit-transition: all 1s linear; 147 -moz-transition: all 1s linear; 148 -ms-transition: all 1s linear; 149 -o-transition: all 1s linear; 150 transition: all 1s linear; 151 152 -webkit-transform: rotate(0deg); 153 -moz-transform: rotate(0deg); 154 transform: rotate(0deg); 155 box-shadow: rgba(0, 0, 0, .8) 0 0 .2em; 156 } 157 158 .main section .round .hand:before{ 159 content: ""; 160 width: .2em; 161 height: 128px; 162 border-radius: .2em .2em 0 0/10em 10em 0 0; 163 background: #c00; 164 position: absolute; 165 top: -127px; 166 left: .1em; 167 margin: 0 0 -2em -.1em; 168 } 169 170 .main section .round .digital{ 171 position: absolute; 172 top: 225px; 173 left: 76px; 174 } 175 176 .main section .round .digital input,.main section .round .digital ul{ 177 float:left; 178 } 179 180 .main section .round .digital ul{ 181 width:20px; 182 height: 30px; 183 color: #ddd; 184 font-family: Consolas, monaco, monospace; 185 background:#000009; 186 margin:0 1px !important; 187 text-align:center; 188 overflow:hidden; 189 position: relative; 190 } 191 192 .main section .round .digital ul li{ 193 width:18px; 194 height:26px; 195 margin-top:2px; 196 background:#1A2730; 197 /*font-weight:lighter;*/ 198 position: relative; 199 overflow:hidden; 200 margin-left:1px; 201 } 202 203 .main section .round .digital ul.mph,.main section .round .digital ul.mph li{ 204 background:none; 205 cursor: pointer; 206 overflow:visible; 207 } 208 209 .main section .round .digital ul.mph li{ 210 height: 30px; 211 margin-top:0; 212 } 213 214 .main section .round .digital ul.mph b,.main section .round .digital ul.mph b:before,.main section .round .digital ul.mph span{ 215 display:block; 216 position: relative; 217 } 218 .main section .round .digital ul.mph b{ 219 width:16px; 220 height:16px; 221 border-radius:8px; 222 background:white; 223 top:-2px; 224 margin-left:2px; 225 } 226 227 .main section .round .digital ul.mph b.selected:before{ 228 background:red; 229 width:12px; 230 height: 12px; 231 content:""; 232 border-radius:6px; 233 top:2px; 234 left:2px; 235 } 236 237 .main section .round .digital ul.mph span{ 238 width:20px; 239 height:15px; 240 font-size:12px; 241 top:-6px; 242 } 243 244 .main section .round .digital ul.mph:first-child{ 245 margin-right: 10px !important; 246 } 247 248 .main section .round .digital ul.mph:last-child{ 249 margin-left: 10px !important; 250 } 251 252 .main section .round p{ 253 position: absolute; 254 bottom:10px; 255 text-align:center; 256 width: 100%; 257 font-size:21px; 258 } 259 260 .main section .round .digital ul li span { 261 width: 20px; 262 height: 26px; 263 display: block; 264 position: relative; 265 top: -234px; 266 } 267 268 .main section .round .digital ul.d4/*:nth-child(4)*/ li{ 269 /* -webkit-transition: all 1s linear; 270 -moz-transition: all 1s linear; 271 -ms-transition: all 1s linear; 272 -o-transition: all 1s linear; 273 transition: all 1s linear;*/ 274 } 275 276 #r1 .digital ul.d4 li{ 277 top: -252px; 278 } 279 280 #r2 .digital ul.d4 li{ 281 top: -168px; 282 } 283 284 #r3 .digital ul.d4 li{ 285 top: -140px; 286 } 287 288 #r4 .digital ul.d3 li{ 289 top: -84px; 290 } 291 292 #r4 .digital ul.d4 li{ 293 top: -112px; 294 } 295 296 #r5 .digital ul.d4 li{ 297 top: -112px; 298 } 299 300 #r6 .digital ul.d4 li{ 301 top: -224px; 302 } 303 </style> 304 </head> 305 <body> 306 <div class="main"> 307 <header> 308 <h1>心血管医用气体</h1> 309 </header> 310 <section> 311 <div class="round" id="r1" data-value="0.42"> 312 <ul class="mark"> 313 <li></li> 314 <li></li> 315 <li></li> 316 <li></li> 317 <li></li> 318 <li></li> 319 <li></li> 320 <li></li> 321 <li></li> 322 <li></li> 323 <li></li> 324 <li></li> 325 <li></li> 326 <li></li> 327 <li></li> 328 <li></li> 329 <li></li> 330 <li></li> 331 <li></li> 332 <li></li> 333 <li></li> 334 <li></li> 335 <li></li> 336 <li></li> 337 <li></li> 338 </ul> 339 <ul class="digits"> 340 <li>0.3</li> 341 <li>0.35</li> 342 <li>0.4</li> 343 <li>0.45</li> 344 <li>0.5</li> 345 <li>0.55</li> 346 <li>0.6</li> 347 </ul> 348 <div class="hand"></div> 349 <div class="digital"> 350 <ul class="mph"> 351 <li> 352 <b id="low" data-id="0"></b> 353 <span for="low">低</span> 354 </li> 355 </ul> 356 <ul> 357 <li>0</li> 358 </ul> 359 <ul> 360 <li>.</li> 361 </ul> 362 <ul> 363 <li>4</li> 364 </ul> 365 <ul class="d4"> 366 <li>9</li> 367 <li>8</li> 368 <li>7</li> 369 <li>6</li> 370 <li>5</li> 371 <li>4</li> 372 <li>3</li> 373 <li>2</li> 374 <li>1</li> 375 <li>0</li> 376 </ul> 377 <ul class="mph"> 378 <li> 379 <b class="selected" id="hight" data-id="1"></b> 380 <span for="hight">高</span> 381 </li> 382 </ul> 383 </div> 384 <p>氧气区域管线压力</p> 385 </div> 386 <div class="round" id="r2" data-value="0.43"> 387 <ul class="mark"> 388 <li></li> 389 <li></li> 390 <li></li> 391 <li></li> 392 <li></li> 393 <li></li> 394 <li></li> 395 <li></li> 396 <li></li> 397 <li></li> 398 <li></li> 399 <li></li> 400 <li></li> 401 <li></li> 402 <li></li> 403 <li></li> 404 <li></li> 405 <li></li> 406 <li></li> 407 <li></li> 408 <li></li> 409 <li></li> 410 <li></li> 411 <li></li> 412 <li></li> 413 </ul> 414 <ul class="digits"> 415 <li>0.3</li> 416 <li>0.35</li> 417 <li>0.4</li> 418 <li>0.45</li> 419 <li>0.5</li> 420 <li>0.55</li> 421 <li>0.6</li> 422 </ul> 423 <div class="hand"></div> 424 <div class="digital"> 425 <ul class="mph"> 426 <li> 427 <b id="low" data-id="0"></b> 428 <span for="low">低</span> 429 </li> 430 </ul> 431 <ul> 432 <li>0</li> 433 </ul> 434 <ul> 435 <li>.</li> 436 </ul> 437 <ul> 438 <li>4</li> 439 </ul> 440 <ul class="d4"> 441 <li>9</li> 442 <li>8</li> 443 <li>7</li> 444 <li>6</li> 445 <li>5</li> 446 <li>4</li> 447 <li>3</li> 448 <li>2</li> 449 <li>1</li> 450 <li>0</li> 451 </ul> 452 <ul class="mph"> 453 <li> 454 <b class="selected" id="hight" data-id="1"></b> 455 <span for="hight">高</span> 456 </li> 457 </ul> 458 </div> 459 <p>压缩空气区域管线压力</p> 460 </div> 461 <div class="round" id="r3" data-value="0.44"> 462 <ul class="mark"> 463 <li></li> 464 <li></li> 465 <li></li> 466 <li></li> 467 <li></li> 468 <li></li> 469 <li></li> 470 <li></li> 471 <li></li> 472 <li></li> 473 <li></li> 474 <li></li> 475 <li></li> 476 <li></li> 477 <li></li> 478 <li></li> 479 <li></li> 480 <li></li> 481 <li></li> 482 <li></li> 483 <li></li> 484 <li></li> 485 <li></li> 486 <li></li> 487 <li></li> 488 </ul> 489 <ul class="digits"> 490 <li>0.3</li> 491 <li>0.35</li> 492 <li>0.4</li> 493 <li>0.45</li> 494 <li>0.5</li> 495 <li>0.55</li> 496 <li>0.6</li> 497 </ul> 498 <div class="hand"></div> 499 <div class="digital"> 500 <ul class="mph"> 501 <li> 502 <b id="low" data-id="0"></b> 503 <span for="low">低</span> 504 </li> 505 </ul> 506 <ul> 507 <li>0</li> 508 </ul> 509 <ul> 510 <li>.</li> 511 </ul> 512 <ul> 513 <li>4</li> 514 </ul> 515 <ul class="d4"> 516 <li>9</li> 517 <li>8</li> 518 <li>7</li> 519 <li>6</li> 520 <li>5</li> 521 <li>4</li> 522 <li>3</li> 523 <li>2</li> 524 <li>1</li> 525 <li>0</li> 526 </ul> 527 <ul class="mph"> 528 <li> 529 <b class="selected" id="hight" data-id="1"></b> 530 <span for="hight">高</span> 531 </li> 532 </ul> 533 </div> 534 <p>CO2区域管线压力</p> 535 </div> 536 <div class="round" id="r4" data-value="0066"> 537 <ul class="mark"> 538 <li></li> 539 <li></li> 540 <li></li> 541 <li></li> 542 <li></li> 543 <li></li> 544 <li></li> 545 <li></li> 546 <li></li> 547 <li></li> 548 <li></li> 549 <li></li> 550 <li></li> 551 <li></li> 552 <li></li> 553 <li></li> 554 <li></li> 555 <li></li> 556 <li></li> 557 <li></li> 558 <li></li> 559 <li></li> 560 <li></li> 561 <li></li> 562 <li></li> 563 </ul> 564 <ul class="digits"> 565 <li>30</li> 566 <li>40</li> 567 <li>50</li> 568 <li style="transform:translate(-10px, -90px);">60</li> 569 <li>70</li> 570 <li style="transform:translate(75px, -25px);">80</li> 571 <li style="transform:translate(72px, 35px);">90</li> 572 </ul> 573 <div class="hand"></div> 574 <div class="digital"> 575 <ul class="mph"> 576 <li> 577 <b id="low" data-id="0"></b> 578 <span for="low">低</span> 579 </li> 580 </ul> 581 <ul> 582 <li>0</li> 583 </ul> 584 <ul> 585 <li>0</li> 586 </ul> 587 <ul class="d3"> 588 <li>9</li> 589 <li>8</li> 590 <li>7</li> 591 <li>6</li> 592 <li>5</li> 593 <li>4</li> 594 <li>3</li> 595 <li>2</li> 596 <li>1</li> 597 <li>0</li> 598 </ul> 599 <ul class="d4"> 600 <li>9</li> 601 <li>8</li> 602 <li>7</li> 603 <li>6</li> 604 <li>5</li> 605 <li>4</li> 606 <li>3</li> 607 <li>2</li> 608 <li>1</li> 609 <li>0</li> 610 </ul> 611 <ul class="mph"> 612 <li> 613 <b class="selected" id="hight" data-id="1"></b> 614 <span for="hight">高</span> 615 </li> 616 </ul> 617 </div> 618 <p>真空区域管线压力</p> 619 </div> 620 <div class="round" id="r5" data-value="0.45"> 621 <ul class="mark"> 622 <li></li> 623 <li></li> 624 <li></li> 625 <li></li> 626 <li></li> 627 <li></li> 628 <li></li> 629 <li></li> 630 <li></li> 631 <li></li> 632 <li></li> 633 <li></li> 634 <li></li> 635 <li></li> 636 <li></li> 637 <li></li> 638 <li></li> 639 <li></li> 640 <li></li> 641 <li></li> 642 <li></li> 643 <li></li> 644 <li></li> 645 <li></li> 646 <li></li> 647 </ul> 648 <ul class="digits"> 649 <li>0.3</li> 650 <li>0.35</li> 651 <li>0.4</li> 652 <li>0.45</li> 653 <li>0.5</li> 654 <li>0.55</li> 655 <li>0.6</li> 656 </ul> 657 <div class="hand"></div> 658 <div class="digital"> 659 <ul class="mph"> 660 <li> 661 <b id="low" data-id="0"></b> 662 <span for="low">低</span> 663 </li> 664 </ul> 665 <ul> 666 <li>0</li> 667 </ul> 668 <ul> 669 <li>.</li> 670 </ul> 671 <ul> 672 <li>4</li> 673 </ul> 674 <ul class="d4"> 675 <li>9</li> 676 <li>8</li> 677 <li>7</li> 678 <li>6</li> 679 <li>5</li> 680 <li>4</li> 681 <li>3</li> 682 <li>2</li> 683 <li>1</li> 684 <li>0</li> 685 </ul> 686 <ul class="mph"> 687 <li> 688 <b class="selected" id="hight" data-id="1"></b> 689 <span for="hight">高</span> 690 </li> 691 </ul> 692 </div> 693 <p>笑气区域管线压力</p> 694 </div> 695 <div class="round" id="r6" data-value="0.51"> 696 <ul class="mark"> 697 <li></li> 698 <li></li> 699 <li></li> 700 <li></li> 701 <li></li> 702 <li></li> 703 <li></li> 704 <li></li> 705 <li></li> 706 <li></li> 707 <li></li> 708 <li></li> 709 <li></li> 710 <li></li> 711 <li></li> 712 <li></li> 713 <li></li> 714 <li></li> 715 <li></li> 716 <li></li> 717 <li></li> 718 <li></li> 719 <li></li> 720 <li></li> 721 <li></li> 722 </ul> 723 <ul class="digits"> 724 <li>0.3</li> 725 <li>0.35</li> 726 <li>0.4</li> 727 <li>0.45</li> 728 <li>0.5</li> 729 <li>0.55</li> 730 <li>0.6</li> 731 </ul> 732 <div class="hand"></div> 733 <div class="digital"> 734 <ul class="mph"> 735 <li> 736 <b id="low" data-id="0"></b> 737 <span for="low">低</span> 738 </li> 739 </ul> 740 <ul> 741 <li>0</li> 742 </ul> 743 <ul> 744 <li>.</li> 745 </ul> 746 <ul> 747 <li>5</li> 748 </ul> 749 <ul class="d4"> 750 <li>9</li> 751 <li>8</li> 752 <li>7</li> 753 <li>6</li> 754 <li>5</li> 755 <li>4</li> 756 <li>3</li> 757 <li>2</li> 758 <li>1</li> 759 <li>0</li> 760 </ul> 761 <ul class="mph"> 762 <li> 763 <b class="selected" id="hight" data-id="1"></b> 764 <span for="hight">高</span> 765 </li> 766 </ul> 767 </div> 768 <p>氮气区域管线压力</p> 769 </div> 770 </section> 771 </div> 772 </body> 773 <script> 774 $(".round").each(function(){ 775 var deg = -110; 776 $(this).find("ul.mark li").each(function(){ 777 var ty = "-120px"; 778 if($(this).index() % 2 == 0){ 779 ty = "-115px"; 780 } 781 782 $(this).css("transform","rotate("+deg+"deg) translateY("+ty+")"); 783 deg += 220 / 24; 784 }); 785 }); 786 787 $(".digital").find("ul:not(.mph):last").click(function(){ 788 789 }); 790 791 function getDeg(num){ 792 return -110 + 220 / 24 * (num - 1); 793 } 794 795 var dig = 28; 796 //---------r1--------- 797 var r1_deg = getDeg(9); 798 $("#r1").find(".hand") 799 .css("transform","rotate("+r1_deg+"deg)"); 800 801 var r1_status = false; 802 803 setTimeout(function(){ 804 var r1 = $("#r1"); 805 806 r1_status = null; 807 808 var new_r1_deg = getDeg(13) 809 810 r1.find(".hand").css("transform","rotate("+new_r1_deg+"deg)"); 811 var num = r1.find(".d4 li").css("top"); 812 813 num = num.substring(0,num.length - 2); 814 815 //r1.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px"); 816 r1.find(".d4 li").animate({ 817 top: parseInt(num) + 28 * 5 + "px" 818 },1500); 819 }, 3000); 820 821 setTimeout(function(){ 822 r1_status = true; 823 },5000); 824 825 setInterval(function(){ 826 if(r1_status == null){return;} 827 828 var r1 = $("#r1").find(".hand")[0]; 829 830 var r1_deg = r1.style.cssText; 831 832 var n = r1_deg.substring(18,r1_deg.length - 5); 833 834 n = r1_status ? parseFloat(n) + 2 : parseFloat(n) - 2; 835 836 r1.style.cssText = "transform:rotate("+n+"deg)"; 837 838 r1_status = !r1_status; 839 },500); 840 841 //---------r2--------- 842 $("#r2").find(".hand") 843 .css("transform","rotate(-12.5deg)"); 844 845 var r2_status = false; 846 847 setTimeout(function(){ 848 var r2 = $("#r2"); 849 850 r2_status = null; 851 852 var new_r2_deg = getDeg(9) 853 854 r2.find(".hand").css("transform","rotate("+new_r2_deg+"deg)"); 855 var num = r2.find(".d4 li").css("top"); 856 857 num = num.substring(0,num.length - 2); 858 859 //r2.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px"); 860 r2.find(".d4 li").animate({ 861 top: parseInt(num) - 28 * 3 + "px" 862 },1500); 863 }, 5000); 864 865 setTimeout(function(){ 866 r2_status = true; 867 },6000); 868 869 setInterval(function(){ 870 if(r2_status == null){return;} 871 872 var r2 = $("#r2").find(".hand")[0]; 873 874 var r2_deg = r2.style.cssText; 875 876 var n = r2_deg.substring(18,r2_deg.length - 5); 877 878 n = r2_status ? parseFloat(n) + 2 : parseFloat(n) - 2; 879 880 r2.style.cssText = "transform:rotate("+n+"deg)"; 881 882 r2_status = !r2_status; 883 },500); 884 885 //---------r3--------- 886 $("#r3").find(".hand") 887 .css("transform","rotate(-3.9deg)"); 888 889 var r3_status = false; 890 //* 891 setInterval(function(){ 892 if(r3_status == null){return;} 893 894 var r3 = $("#r3").find(".hand")[0]; 895 896 var r3_deg = r3.style.cssText; 897 898 var n = r3_deg.substring(18,r3_deg.length - 5); 899 900 n = r3_status ? parseFloat(n) + 2 : parseFloat(n) - 2; 901 902 r3.style.cssText = "transform:rotate("+n+"deg)"; 903 904 r3_status = !r3_status; 905 },500);//*/ 906 907 //---------r4--------- 908 var r4_deg = getDeg(15); 909 $("#r4").find(".hand") 910 .css("transform","rotate("+r4_deg+"deg)"); 911 912 var r4_status = true; 913 914 setTimeout(function(){ 915 var r4 = $("#r4"); 916 917 r4_status = null; 918 919 var new_r4_deg = getDeg(17) 920 921 r4.find(".hand").css("transform","rotate("+new_r4_deg+"deg)"); 922 923 var num = r4.find(".d4 li").css("top"); 924 num = num.substring(0,num.length - 2); 925 926 //r4.find(".d4 li").css("top",parseInt(num) + 28 * i + "px"); 927 928 r4.find(".d4 li").animate({ 929 top: parseInt(num) + 28 * 4 + "px" 930 },1000, function() { 931 var d3 = r4.find(".d3 li").css("top"); 932 d3 = d3.substring(0,d3.length - 2); 933 934 r4.find(".d4 li").stop(); 935 r4.find(".d4 li").css("top","-252px"); 936 937 r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px"); 938 939 r4_status = false; 940 }); 941 }, 7000); 942 /* 943 setTimeout(function(){ 944 var r4 = $("#r4"); 945 var d3 = r4.find(".d3 li").css("top"); 946 d3 = d3.substring(0,d3.length - 2); 947 948 r4.find(".d4 li").stop(); 949 r4.find(".d4 li").css("top","-252px"); 950 951 r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px"); 952 }, 6000); 953 */ 954 //* 955 setInterval(function(){ 956 if(r4_status == null){return;} 957 958 var r4 = $("#r4").find(".hand")[0]; 959 960 var r4_deg = r4.style.cssText; 961 962 var n = r4_deg.substring(18,r4_deg.length - 5); 963 964 n = r4_status ? parseFloat(n) + 2 : parseFloat(n) - 2; 965 966 r4.style.cssText = "transform:rotate("+n+"deg)"; 967 968 r4_status = !r4_status; 969 },500);//*/ 970 971 var r5_deg = getDeg(13); 972 $("#r5").find(".hand") 973 .css("transform","rotate("+r5_deg+"deg)"); 974 var r5_status = false; 975 //* 976 setInterval(function(){ 977 if(r5_status == null){return;} 978 979 var r5 = $("#r5").find(".hand")[0]; 980 981 var r5_deg = r5.style.cssText; 982 983 var n = r5_deg.substring(18,r5_deg.length - 5); 984 985 n = r5_status ? parseFloat(n) + 2 : parseFloat(n) - 2; 986 987 r5.style.cssText = "transform:rotate("+n+"deg)"; 988 989 r5_status = !r5_status; 990 },500);//*/ 991 992 var r6_deg = getDeg(17); 993 $("#r6").find(".hand") 994 .css("transform","rotate(42.666667deg)"); 995 var r6_status = false; 996 997 setTimeout(function(){ 998 var r6 = $("#r6"); 999 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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：HTML+CSS3 纯代码实现转盘效果
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
