-
Notifications
You must be signed in to change notification settings - Fork 0
/
t2.html
352 lines (325 loc) · 19.7 KB
/
t2.html
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<!doctype html>
<html>
<head>
<title>双力精化*新三原色</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- 载入Swiper移动端触摸滑动插件，与swiper.jquery.min.js文件同时使用-->
<link href="css/bulma.css" rel="stylesheet" />
<!-- 载入Swiper移动端触摸滑动插件，与swiper.jquery.min.js文件同时使用-->
<link href="css/swiper.min.css" rel="stylesheet" />
<!-- 载入CSS3动画库，配合Swiper动画控制器swiper.animate.js文件同时使用 -->
<link href="css/animate.min.css" rel="stylesheet" />
<!-- 载入loading进度条显示样式，与loading.js文件同时使用 -->
<link href="css/loading.css" rel="stylesheet" />
<!-- 载入index.css文件，用于控制页面中动画元素的显示样式 -->
<link href="css/index.css" rel="stylesheet" />
<link href="css/hjx1.css" rel="stylesheet" />
<!-- 载入jQuery核心框架 -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- 载入bootstrap.css核心框架 -->
<!--<script type="text/javascript" src="js/bootstrap.js"></script>-->
<!-- 载入Swiper移动端触摸滑动插件，与swiper.min.css文件同时使用 -->
<script type="text/javascript" src="js/swiper.min.js"></script>
<!-- 载入Swiper动画控制器，与swiper.animate.param.js文件同时使用 -->
<script src="js/swiper.animate1.0.2.min.js"></script>
<!-- 载入loading进度条控制脚本，与loading.css文件同时使用 -->
<!-- <script src="js/loading.js"></script> -->
</head>
<body>
<div id="swiper" class="swiper-container">
<div class="swiper-wrapper">
<!-- -------------------------- 第一页封面-------------------------------------->
<div class="swiper-slide s1">
<div class="z1_1"><img class="ani img1_1" src="images/title.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></div>
<div class="z1_1"><img class="ani img1_2" src="img/soli1.jpg" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s"></div>
<div class="z1_1">
<h1 class="ani img1_3" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="3s">环保稳定高匀染新三原色D系列</h1>
</div>
<div class="z1_1">
<h1 class="ani img1_4" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="4s">浅中色系列</h1>
</div>
</div>
<!-- ----------------------第二页三原色------------------------>
<div class="swiper-slide s2 ">
<div class="ani box1 z2_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<h3 class="ani ha hj " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">现有三原色</h3>
<p class="ani pa hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">分散染料老三原色是指：黄RGFL，红3B，蓝2BLN，俗称“老三样”是聚酯纤维着色不可缺少的基本色调之一</p>
</div>
<div class="ani box2 z2_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="3s">
<h3 class="ani hb hj " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">优点</h3>
<p class="ani pb hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="5s">配伍性极好，上染同步性好。</p>
</div>
<div class="ani box3 z2_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="6s">
<h3 class="ani ha hj " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="7s">缺点</h3>
<p class="ani pa hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">黄RGFL为偶氮结构，在某些特定条件下会裂解成致癌物质，不符合德国政府的Oeko-Tex Standard 100和欧盟Eco-Label标准，被列入禁用分散染料之一。</p>
</div>
<div class="ani box4 z2_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="9s">
<p class="ani pa hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">红3B 为蒽醌结构，价格较高，色光艳丽，染色时对水质要求较高，易产生色花、色斑、跑色等问题。</p>
</div>
<div class="ani box5 z2_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="10s">
<p class="ani pc hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">蓝2BLN为蒽醌结构，色光鲜艳、日晒牢度好、各项依存性能佳、价格较高，用量较大，合成时产生的“三废”对环境影响较大，而且易被检出Oeko-Tex Standard 100所禁用的分散蓝35# 或蓝26#。</p>
</div>
</div>
<!-------------------------------- 第三页替代品-------------------------->
<div class="swiper-slide s3 ">
<div class="ani box1 z3_1 " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<h3 class="ani ha hj " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">现有替代品缺点：</h3>
<p class="ani pa hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">替代品中较为典型的是SE-3R黄和E-GL黄</p>
</div>
<div class="ani box2 z3_1 " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">
<p class="ani pb hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="5s">但使用后逐渐发现：SE-3R黄与C.I.分散红60、C.I.分散蓝56等在拼色过程中配伍性较差，如卷染上易出现头尾差、溢流染色，易出现匹差甚至色花等现象</p>
</div>
<div class="ani box3 z3_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="7s">
<p class="ani pa hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">E-GL黄的升华牢度不够理想，定型色变大；特别是着色较高档次的涤纶混纺织物时此问题尤为明显。</p>
</div>
<div class="ani box4 z3_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="9s">
<p class="ani pa hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">分散橙S-4RL染料中含有不环保的四氯苯酚和五氯苯酚，不符合最新的 Reach 法规和 Oeko-Tex Standard 100 环保要求；荷兰C&A公司已经将 分散橙S-4RL 列入禁用染料名单。</p>
</div>
<div class="ani box5 z3_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="10s">
<p class="ani pc hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="11s">分散红玉S-5Bl是在中深色配色的主要红色染料，分散红玉S-5Bl染色适宜的pH值为4～5，由于它不耐碱，在进行中深色涤纶纤维和面料染色时，当pH值不稳定，容易造成发色色光不正常，导致出现加色的问题。</p>
</div>
<div class="ani box6 z3_1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="12s">
<p class="ani pd hj" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="13s">分散红玉S-5Bl在染浅色时匀染性差；PH不稳定，易偏色，从而造成回修。。</p>
</div>
</div>
<!-------第四页现有替代品不足小结一下：---------------->
<div class="swiper-slide">
<!-- -----第一行------------- --->
<div class="columns ">
<h3 class="ani hj h31" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">现有替代品不足小结一下：</h3>
</div>
<!-------第二列---------------->
<div class="columns cos1 is-mobile">
<div class="column col421 is-8 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
<h1 class="ani h421 " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">配伍性差
<br>易色花</h1>
</div>
</div>
<!-------第三列---------------->
<div class="columns cos1 is-mobile ">
<div class="column col431 is-8 ani is-offset-4" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="3s">
<h1 class="ani h431" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">水洗升华
<br>
牢度不好</h1>
</div>
</div>
<!-------第四行--------------->
<div class="columns cos1 is-mobile ">
<div class="column col441 is-8 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="5s">
<h1 class="ani h441" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="6s">染色稳定不好<br>
缸差大，一次成功率低<br>
易偏色加料</h1>
</div>
</div>
<!-------第五行--------------->
<div class="columns cos1 is-mobile ">
<div class="column col451 ani is-8 ani is-offset-4" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="7s">
<h1 class="ani h451" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">定型
色变大，颜<br> 色不好掌握，易<br> 回修</h1>
</div>
</div>
<!-------第六行--------------->
<div class="columns cos1 is-mobile ">
<div class="column col461 ani is-10 ani is-offset-1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="9s">
<h1 class="ani h461" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="10s">耐碱 性不好<br>无法做碱性染色</h1>
</div>
</div>
</div>
<!-- ------------ -第五页新三原色D系列： ------------------>
<div class="swiper-slide s4 f1">
<!---------- 第一列--蓝D-2B ------------>
<div class="f21">
<div class="z1"><img class="imgz1 ani" src="img/5/e2.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s"></div>
<div class="z2">
<div class="z3">
<img class="imgz31 ani" src="img/5/e3.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">
<img class="imgz32 ani" src="img/5/e4.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="3s">
</div>
<div class="z4">
<img class="imgz41 ani" src="img/5/200.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">
<span class="imgz42 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="5s">200%</span>
</div>
</div>
</div>
<!---------- 第二列--黄D-3R ------------>
<div class="f21">
<div class="z1">
<div class="z3">
<img class="imgz31 ani" src="img/5/e6.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="7s">
<img class="imgz32 ani" src="img/5/e5.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8s">
</div>
<div class="z4">
<img class="imgz41 ani" src="img/5/200.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="9s">
<span class="imgz42 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="10s">200%</span>
</div>
</div>
<div class="z2">
<img class="imgz1 ani" src="img/5/e7.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="6s">
</div>
</div>
<!---------- 第三列--红D-4B ------------>
<div class="f21">
<div class="z1"><img class="imgz1 ani" src="img/5/e9.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="11s"></div>
<div class="z2">
<div class="z3">
<img class="imgz31 ani" src="img/5/e10.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="12s">
<img class="imgz32 ani" src="img/5/e11.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="13s">
</div>
<div class="z4">
<img class="imgz41 ani" src="img/5/200.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="14s">
<span class="imgz42 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="15s">200%</span>
</div>
</div>
</div>
</div>
<!-- 分页实例-->
<div class="swiper-slide">
<div id="child1" class="swiper-container swiper-container-child1">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:#F3533C;">
<img class="ani child2_ani_01" src="img/wording_design.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s"/>
<img class="child2_ani_02" src="img/circle-design.png" />
<img class="child2_ani_03" src="img/people_design.png" />
<img class="child2_ani_04" src="img/check_design.png" />
<img class="child2_ani_05" src="img/floating_design.png" />
</div>
<div class="swiper-slide" style="background-color:#F3533C;" >
<img class="ani child2_ani_06" src="img/introduction_design.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s" />
<img class="child2_ani_07" src="img/btn_design.png" />
</div>
<div class="swiper-slide"> 我是第三个子幻灯片 </div>
</div>
</div>
</div>
<!-- 示例分页html代码-->
<div class="swiper-slide">
<div class="swiper-container swiper-container-child111">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:#F3533C;">
<h1 class="ani " swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">实例分页一</h1>
</div>
<div class="swiper-slide" style="background-color:#F3533C;" >
<h1 class="ani child2_ani_01" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">实例分页二</h1>
</div>
<div class="swiper-slide" style="background-color:#F3533C;" >
<h1 class="ani child2_ani_01" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">实例分页三</h1>
</div>
</div>
</div>
</div>
<!-- 示例分页html代码-->
<div class="swiper-slide">
<div class="swiper-container swiper-container-child2">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:#F3533C;">
<h1 class="ani child2_ani_01" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">实例分页4</h1>
</div>
<div class="swiper-slide" style="background-color:#F3533C;" >
<h1 class="ani child2_ani_01" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">实例分页5</h1>
</div>
<div class="swiper-slide" style="background-color:#F3533C;" >
<h1 class="ani child2_ani_01" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">实例分页6</h1>
</div>
</div>
</div>
</div>
</div>
<!-- 如果需要分页器---banner下边的圆点点 -->
<!-- <div class="swiper-pagination"></div>-->
<!-- 如果需要导航按钮--banner两侧的耳朵按钮 -->
<!--
<div class="swiper-button-prev"></div>-->
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div>-->
</div>
<!-------------------------------音乐------------------------->
<div class="music">
<i class="icon-music open" num="1"></i>
<i class="music-span"></i>
<audio id="aud" src="music/m1.mp3" loop="loop" autoplay></audio>
<!-- <div class="music_text">开启</div>-->
</div>
-
<!---------------------------------音乐结束------------------------------>
</body>
<script type="text/javascript">
var mySwiper = new Swiper ('#swiper', {
//effect: 'cube',
// direction : 'vertical',
// 如果需要分页器
pagination: '.swiper-pagination',
//paginationClickable: true,
direction: 'vertical',
nextButton: '.swiper-button-next',
mousewheelControl : true,
autoHeight:true,
calculateHeight : true,
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
loop : true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
mousewheelControl : true,
onInit: function(swiper){//Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper);
swiperAnimate(swiper);//隐藏动画元素
swiper.container[0].style.height=swiper.slides[swiper.activeIndex].offsetHeight+'px';
},
onSlideChangeStart: function() {
// if(swiper.activeIndex==1){mizhu.alert('欢迎来到双力精化', '希望新三原色为您创造效益');}
},
onSlideChangeEnd: function(swiper){//初始化完成开始动画
swiperAnimate(swiper);//每个slide切换结束时也运行当前slide动画
swiper.container[0].style.height=swiper.slides[swiper.activeIndex].offsetHeight+'px';
},
});
// 第 1 个子swiper幻灯片
var mySwiper_child1 = new Swiper('.swiper-container-child1',{
direction: 'horizontal',
grabCursor : true,
loop : true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
});
// 第 111 个子swiper幻灯片
var mySwiper_child111 = new Swiper('.swiper-container-child111',{
direction: 'horizontal',
grabCursor : true,
loop : true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
});
// 第 111 个子swiper幻灯片
var mySwiper_child2 = new Swiper('.swiper-container-child2',{
direction: 'horizontal',
grabCursor : true,
loop : true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
});
// 音乐
$(".music").click(function(){
if($(".icon-music").attr("num") == "1"){
$(".icon-music").removeClass("open");
$(".icon-music").attr("num","2")
$(".music-span").css("display","none");
document.getElementById("aud").pause();
$(".music_text").html("关闭");
$(".music_text").addClass("show_hide");
setTimeout(musicHide,2000);
}else{
$(".icon-music").attr("num","1");
$(".icon-music").addClass("open");
$(".music-span").css("display","block");
document.getElementById("aud").play();
$(".music_text").html("开启");
$(".music_text").addClass("show_hide");
setTimeout(musicHide,2000);
}
function musicHide(){
$(".music_text").removeClass("show_hide");
}
});// 音乐
</script>
</html>