JQ+CSS实现简单文字重组

1
init.sec02 = function(){
2
        $('#sec02_baorong').hide();
3
        $('#sec02_guangkuo').hide();
4
        $('#sec02_renxing').hide();
5
        $('#sec02_zhuizhu').hide();
6
        $('#sec02_yanxu').hide();
7
        $('#sec02_jiating').hide();
8
        $('#sec02_jiantou').hide();
9

10
        /*
11
        *进入
12
        */
13
        clearTimeout(init.sec02_baorongInTimeout);
14
        init.sec02_baorongInTimeout = setTimeout(function(){
15
          $('#sec02_bao').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
16
          $('#sec02_rongShang').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
17
          $('#sec02_rongXia').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
18
          $('#sec02_baorong').show();
19
          $('#sec02_bao').show();
20
          $('#sec02_rongXia').show();
21
        },1000);
22
        clearTimeout(init.sec02_zhuizhuInTimeout);
23
        init.sec02_zhuizhuInTimeout = setTimeout(function(){
24
          $('#sec02_guangkuo').hide();
25
          $('#sec02_zhuizhu').show();
26

27
          $('#sec02_bao').hide();
28
          $('#sec02_rongXia').hide();
29
          $('#sec02_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"0.2"});
30
          $('#sec02_zhui').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
31
          $('#sec02_zhuzuo').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
32
          $('#sec02_zhuyou').css({"top": "47%","left":" 15%","width":"initial","margin":"0 auto"});
33
          $('#sec02_zhui').show();
34
          $('#sec02_zhuzuo').show();
35
          $('#sec02_zhuyou').show();
36
        },3000);
37

38
        clearTimeout(init.sec02_guangkuoInTimeout);
39
        init.sec02_guangkuoInTimeout = setTimeout(function(){
40
          $('#sec02_guangkuo').show();
41
          $('#sec02_zhui').hide();
42
          $('#sec02_zhuzuo').hide();
43
          $('#sec02_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"0.2"});
44
          var sec02_guangall={top:"10%",left:"32.5%",width:"initial"};
45
          $('#sec02_guang').css(sec02_guangall);
46
          $('#sec02_guangkuang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
47
          $('#sec02_kuo').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
48
          $('#sec02_guang').show();
49
          $('#sec02_guangkuang').show();
50
          $('#sec02_kuo').show();
51
        },5000);
52
        clearTimeout(init.sec02_yanxuInTimeout);
53
        init.sec02_yanxuInTimeout = setTimeout(function(){
54
          $('#sec02_yanxu').show();
55
          $('#sec02_guangkuang').hide();
56
          $('#sec02_kuo').hide();
57
          $('#sec02_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"0.2"});
58
          $('#sec02_yanzuo').css({"top": "16.5%","left": "7%","width":"initial","margin":"0 auto"});
59
          $('#sec02_yanyou').css({"top": "10%","left":"6%","width":"19.5%","width":"initial","margin":"0 auto"});
60
          $('#sec02_xu').css({"top": "45%","left":" 6%","width":" 19.5%","width":"initial","margin":"0 auto"});
61
          $('#sec02_yanzuo').show();
62
          $('#sec02_yanyou').show();
63
          $('#sec02_xu').show();
64
        },7000);
65
        clearTimeout(init.sec02_renxingInTimeout);
66
        init.sec02_renxingInTimeout = setTimeout(function(){
67
          $('#sec02_renxing').show();
68
          $('#sec02_yanyou').hide();
69
          $('#sec02_xu').hide();
70
          $('#sec02_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"0.2"});
71

72
          $('#sec02_renyou').css({"top": "14%","left": "22。5%","width":"initial","margin":"0 auto"});
73
          $('#sec02_renzuo').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
74
          $('#sec02_xing').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
75
          $('#sec02_renzuo').show();
76
          $('#sec02_renyou').show();
77
          $('#sec02_xing').show();
78
        },9000);
79
        /*
80
        *变化
81
        */
82

83
        clearTimeout(init.sec02_chongzuTimeout);
84
        init.sec02_chongzuTimeout = setTimeout(function(){
85
          $('#sec02_renzuo').hide();
86
          $('#sec02_xing').hide();
87
          $('#sec02_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"1"});
88
          $('#sec02_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"1"});
89
          $('#sec02_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"1"});
90
          $('#sec02_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"1"});
91
          $('#sec02_renyou').css({"top": "55%","left": "16%","width":"14%","margin":"0 auto","opacity":"1"});
92
          $('#sec02_jiating').show();
93
          $('#sec02_jiantou').show();
94
        },10000);
95
      }