你的位置:首页 > 网页设计

[网页设计]HTML+CSS3 纯代码实现转盘效果


  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="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>

View Code