JQ+CSS实现简单文字重组
这个主要是需要美工把需要重组的笔画切好，目前只能将项目中部分截出分享给大家了。 注：$(“#xixi”).css()中top、left等属性不可有小数点，不然会出现无法改变属性的效果。
主要代码
[toggle hide=“yes” title=“主要代码” color=“”]
init.sec02 = function(){
$('#sec02_baorong').hide();
$('#sec02_guangkuo').hide();
$('#sec02_renxing').hide();
$('#sec02_zhuizhu').hide();
$('#sec02_yanxu').hide();
$('#sec02_jiating').hide();
$('#sec02_jiantou').hide();
/*
*进入
*/
clearTimeout(init.sec02_baorongInTimeout);
init.sec02_baorongInTimeout = setTimeout(function(){
$('#sec02_bao').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
$('#sec02_rongShang').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
$('#sec02_rongXia').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
$('#sec02_baorong').show();
$('#sec02_bao').show();
$('#sec02_rongXia').show();
},1000);
clearTimeout(init.sec02_zhuizhuInTimeout);
init.sec02_zhuizhuInTimeout = setTimeout(function(){
$('#sec02_guangkuo').hide();
$('#sec02_zhuizhu').show();
$('#sec02_bao').hide();
$('#sec02_rongXia').hide();
$('#sec02_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"0.2"});
$('#sec02_zhui').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
$('#sec02_zhuzuo').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
$('#sec02_zhuyou').css({"top": "47%","left":" 15%","width":"initial","margin":"0 auto"});
$('#sec02_zhui').show();
$('#sec02_zhuzuo').show();
$('#sec02_zhuyou').show();
},3000);
clearTimeout(init.sec02_guangkuoInTimeout);
init.sec02_guangkuoInTimeout = setTimeout(function(){
$('#sec02_guangkuo').show();
$('#sec02_zhui').hide();
$('#sec02_zhuzuo').hide();
$('#sec02_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"0.2"});
var sec02_guangall={top:"10%",left:"32.5%",width:"initial"};
$('#sec02_guang').css(sec02_guangall);
$('#sec02_guangkuang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
$('#sec02_kuo').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
$('#sec02_guang').show();
$('#sec02_guangkuang').show();
$('#sec02_kuo').show();
},5000);
clearTimeout(init.sec02_yanxuInTimeout);
init.sec02_yanxuInTimeout = setTimeout(function(){
$('#sec02_yanxu').show();
$('#sec02_guangkuang').hide();
$('#sec02_kuo').hide();
$('#sec02_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"0.2"});
$('#sec02_yanzuo').css({"top": "16.5%","left": "7%","width":"initial","margin":"0 auto"});
$('#sec02_yanyou').css({"top": "10%","left":"6%","width":"19.5%","width":"initial","margin":"0 auto"});
$('#sec02_xu').css({"top": "45%","left":" 6%","width":" 19.5%","width":"initial","margin":"0 auto"});
$('#sec02_yanzuo').show();
$('#sec02_yanyou').show();
$('#sec02_xu').show();
},7000);
clearTimeout(init.sec02_renxingInTimeout);
init.sec02_renxingInTimeout = setTimeout(function(){
$('#sec02_renxing').show();
$('#sec02_yanyou').hide();
$('#sec02_xu').hide();
$('#sec02_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"0.2"});
$('#sec02_renyou').css({"top": "14%","left": "22。5%","width":"initial","margin":"0 auto"});
$('#sec02_renzuo').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
$('#sec02_xing').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
$('#sec02_renzuo').show();
$('#sec02_renyou').show();
$('#sec02_xing').show();
},9000);
/*
*变化
*/
clearTimeout(init.sec02_chongzuTimeout);
init.sec02_chongzuTimeout = setTimeout(function(){
$('#sec02_renzuo').hide();
$('#sec02_xing').hide();
$('#sec02_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"1"});
$('#sec02_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"1"});
$('#sec02_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"1"});
$('#sec02_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"1"});
$('#sec02_renyou').css({"top": "55%","left": "16%","width":"14%","margin":"0 auto","opacity":"1"});
$('#sec02_jiating').show();
$('#sec02_jiantou').show();
},10000);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
[/toggle]
预览
除特别注明外，本站所有文章均为 Windcoder网 原创，转载请注明出处来自： jqcss-shi-xian-jian-dan-wen-zi-zhong-zu
Loading comments...
预览
演示，滑不动。。触屏用的吧？
回复 @笑笑笑： 可以滑动啊，不过确实主要是在手机上用的
我也想着做个宣传动画，挂在head
回复 @wys.me： 那就去玩呗，感觉有些没美编有时还真不太容易实现。我发的这些主要都是用在微信那边的