Skip to content

Commit 0d3ad70

Browse files
townmitownmi
committed
change
1 parent 1f38405 commit 0d3ad70

File tree

1 file changed

+123
-35
lines changed

1 file changed

+123
-35
lines changed

‎lesson6/index.html‎

Lines changed: 123 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script type="text/javascript" src="js/angular/angular.min.js"></script>
99
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
1010
<style type="text/css">
11-
body, ul, ol, p{
11+
body, ul, ol, p, h2{
1212
margin: 0;
1313
padding: 0;
1414
}
@@ -19,14 +19,18 @@
1919
li{
2020
list-style: none;
2121
}
22+
a{
23+
text-decoration: none;
24+
}
25+
/*nav*/
2226
.nav{
2327
width: 100%;
2428
position: fixed;
2529
left: 0;
2630
z-index: 999;
2731
text-align: center;
28-
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
29-
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
32+
display: box;
33+
display: -webkit-box;
3034
display: -ms-flexbox; /* TWEENER - IE 10 */
3135
display: -webkit-flex; /* NEW - Chrome */
3236
display: flex;
@@ -74,7 +78,7 @@
7478
line-height: .6rem;
7579
font-size: .3rem;
7680
}
77-
81+
/*图片轮播*/
7882
.carousel{
7983
width: 100%;
8084
height: 3.5rem;
@@ -127,7 +131,7 @@
127131
color: #ff5500;
128132
}
129133

130-
/*pro*/
134+
/*产品列表*/
131135
.pro{
132136
width: 100%;
133137
padding: .5rem 0 0 0;
@@ -151,13 +155,74 @@
151155
left: 0;
152156
top: 0;
153157
z-index: 1;
154-
border-radius: 10px;
158+
border-radius: 10px;/*
155159
transform: matrix(0.5, 0, 0, 0.7, 50, 10);
156160
-moz-transform: matrix(0.5, 0, 0, 0.7, 50, 10);
157161
-webkit-transform: matrix(.5, 0, 0, .7, 50, 10);
158162
transition : all .3s ease-in-out;
159-
-moz-transform : all .3s ease-in-out;
160-
-webkit-transform : all .3s ease-in-out;
163+
-moz-transition : all .3s ease-in-out;
164+
-webkit-transition : all .3s ease-in-out;*/
165+
}
166+
/*我的资产*/
167+
.cash{
168+
letter-spacing: -1px;
169+
}
170+
.cash_top{
171+
padding: .5rem;
172+
height: 3.3rem;
173+
background-color: #ff5500;
174+
font-size: .5rem;
175+
color: #ffffff;
176+
}
177+
.cash_top p{
178+
position: relative;
179+
height: 1rem;
180+
line-height: 1rem;
181+
}
182+
.cash_top a{
183+
position: absolute;
184+
right: 0;
185+
color: #ffffff;
186+
}
187+
.cash_top a i{
188+
font-size: .6rem;
189+
}
190+
.cash_top h2{
191+
line-height: 3rem;
192+
font-weight: 100;
193+
font-size: 2rem;
194+
font-family: Arial;
195+
}
196+
.cash_middle{
197+
height: 2.5rem;
198+
padding: .5rem;
199+
background-color: #ffffff;
200+
border-bottom: 1px solid red;
201+
}
202+
.cash_middle p{
203+
line-height: .5rem;
204+
font-size: .5rem;
205+
color: #939393;
206+
}
207+
.cash_middle h2{
208+
line-height: 2.4rem;
209+
font-weight: 100;
210+
font-size: 1.6rem;
211+
font-family: Arial;
212+
color: #696969;
213+
}
214+
.cash_m_yesterday, .cash_m_all{
215+
width: 48%;
216+
height: 100%;
217+
float: left;
218+
}
219+
.cash_m_all{
220+
width: 44%;
221+
padding-left: 5%;
222+
border-left: 1px solid #c7c7c7;
223+
}
224+
.cash_m_yesterday h2{
225+
color: #cc5500;
161226
}
162227
</style>
163228
</head>
@@ -190,7 +255,7 @@
190255
<div class="nav head">
191256
<span>{{title}}</span>
192257
</div>
193-
258+
<!---->
194259
<div class="carousel" id="carousel">
195260
<ul>
196261
<li style="background-color: #0c63ee"><a href="#"><img src="" alt=""></a></li>
@@ -200,13 +265,14 @@
200265
<ol>
201266
</ol>
202267
</div>
203-
268+
204269
</script>
205270
<!-- pro template -->
206271
<script type="text/ng-template" id="pro.html">
207272
<div class="nav head">
208273
<span>{{title}}</span>
209274
</div>
275+
<!---->
210276
<div class="pro" id="pro">
211277
<ul class="pro_list">
212278
<li style="background-color: #123456"></li>
@@ -215,12 +281,34 @@
215281
<li style="background-color: red"></li>
216282
</ul>
217283
</div>
284+
218285
</script>
219286
<!-- cash template -->
220287
<script type="text/ng-template" id="cash.html">
221288
<div class="nav head">
222289
<span>{{title}}</span>
223290
</div>
291+
<div class="cash" id="cash">
292+
<div class="cash_top">
293+
<p>
294+
<span>总资产（元）</span>
295+
<a href="javascript:;">
296+
交易记录&nbsp;<i class="fa fa-angle-double-right"></i>
297+
</a>
298+
</p>
299+
<h2>0.00</h2>
300+
</div>
301+
<div class="cash_middle">
302+
<div class="cash_m_yesterday">
303+
<p>昨日收益（元）</p>
304+
<h2>0.00</h2>
305+
</div>
306+
<div class="cash_m_all">
307+
<p>累计收益（元）</p>
308+
<h2>24.16</h2>
309+
</div>
310+
</div>
311+
</div>
224312
</script>
225313
<!-- more template -->
226314
<script type="text/ng-template" id="more.html">
@@ -230,26 +318,21 @@
230318
</script>
231319

232320
<script type="text/javascript">
321+
// 重置HTML的rem
233322
function reSetRem(){
234323
var html = document.getElementsByTagName("html")[0];
235324
var rem = document.body.clientWidth/10;
236325
if(window.navigator.userAgent.match(/Firefox/gi)){
237326
rem = screen.availWidth/10;
238327
}
239328
html.style.fontSize = rem+"px";
240-
// // document.getElementById("get2").innerHTML = rem;
241-
242-
// setInterval(function(){
243-
// var rem = document.getElementsByTagName("html")[0].style.fontSize;
244-
// document.getElementById("get2").innerHTML = rem+Math.random();
245-
// },1000)
246329
}
247330
reSetRem();
248331
</script>
249332

250333
<script type="text/javascript">
251334

252-
335+
// 切换栏目根据路由给出active
253336
function footActive(index){
254337

255338
var foot_link = document.getElementById("foot").getElementsByTagName("a");
@@ -272,6 +355,8 @@
272355

273356

274357
<script type="text/javascript">
358+
// 设置products栏目的高度
359+
// 在用户切换到产品栏目运行
275360
function setProHeight(){
276361

277362
var pro = document.getElementById("pro");
@@ -284,21 +369,18 @@
284369

285370
pro.style.height = proH + "px";
286371

287-
}
288-
289-
// setProHeight();
372+
// 监听页面的缩放，改变产品栏目的高度
373+
window.addEventListener("resize", function(){
374+
setProHeight();
375+
})
290376

291-
</script>
292-
<script type="text/javascript">
293-
294-
window.addEventListener("resize", function(){
295-
setProHeight();
296-
})
377+
}
297378

298379
</script>
299380

300381
<script type="text/javascript">
301382

383+
// 产品栏目的列表切换程序
302384
function proRun(){
303385

304386
var proList = document.getElementById("pro").getElementsByTagName("ul")[0];
@@ -319,11 +401,17 @@
319401
}
320402

321403
proAnimate.forEach(function (el, i){
404+
// console.log(el, i)
405+
el.style.transition = "all .3s ease-in-out";
406+
el.style["-moz-transition"] = "all .3s ease-in-out";
407+
el.style["-webkit-transition"] = "all .3s ease-in-out";
322408

323409
el.addEventListener("touchstart", function proSwapSatrt (e){
324410

325411
var changedDom = this;
326412

413+
console.log(changedDom)
414+
327415
var SX = e.changedTouches[0].clientX;
328416
var SY = e.changedTouches[0].clientY;
329417

@@ -334,11 +422,11 @@
334422

335423
var X = EX - SX, Y = EY - SY;
336424

337-
if(X>100){
425+
if(X>70){
338426
changedDom.style.transform = "matrix(.6, 0, 0, .9, "+400+", 0)";
339427
changedDom.style["-moz-transform"] = "matrix(.6, 0, 0, .9, "+400+", 0)";
340428
changedDom.style["-webkit-transform"] = "matrix(.6, 0, 0, .9, "+400+", 0)";
341-
}else if(X<-100){
429+
}else if(X<-70){
342430
changedDom.style.transform = "matrix(.6, 0, 0, .9, "+-400+", 0)";
343431
changedDom.style["-moz-transform"] = "matrix(.6, 0, 0, .9, "+-400+", 0)";
344432
changedDom.style["-webkit-transform"] = "matrix(.6, 0, 0, .9, "+-400+", 0)";
@@ -362,7 +450,8 @@
362450

363451
},200);
364452

365-
return document.removeEventListener("touchend", proSwapEnd);
453+
// changedDom = null;
454+
document.removeEventListener("touchend", proSwapEnd);
366455

367456
});
368457

@@ -378,6 +467,7 @@
378467
<script type="text/javascript">
379468
var myApp = angular.module('myApp', ['ngRoute']);
380469

470+
// 路由控制
381471
myApp.config(function ($routeProvider){
382472

383473
$routeProvider.when("/", {
@@ -418,6 +508,7 @@
418508

419509
});
420510

511+
// 添加控制器
421512
myApp.controller("HomeCtrl", function ($scope){
422513
$scope.title = "精选推荐";
423514
footActive(0);
@@ -445,6 +536,8 @@
445536

446537

447538
<script type="text/javascript">
539+
540+
// 首页的图片轮播程序
448541
function run(){
449542
var carousel = document.getElementById("carousel");
450543
var carouselUl = carousel.getElementsByTagName("ul")[0];
@@ -464,17 +557,14 @@
464557
}
465558

466559
var timer = null, index = 0;
467-
// clearInterval(timer);
560+
468561
timer = setInterval(function(){
469-
// clearInterval(timer);
470562
index++;
471563
index = index%3;
472564
runCarousel(index);
473565
console.log(index+"--"+new Date().getTime());
474566
}, 3000);
475567

476-
// var get = document.getElementById("get");
477-
478568
carousel.addEventListener("touchstart", function carouselStart(e){
479569
var SX = e.changedTouches[0].clientX;
480570
var SY = e.changedTouches[0].clientY;
@@ -507,7 +597,6 @@
507597
clearInterval(timer);
508598

509599
timer = setInterval(function(){
510-
// clearInterval(timer);
511600
index = index%3;
512601
runCarousel(index);
513602
console.log(index+"--"+new Date().getTime());
@@ -520,7 +609,6 @@
520609
});
521610

522611
function runCarousel(index){
523-
// get.innerHTML = index;
524612
carouselUl.className = "active"+(index+1);
525613
for(var i=0; i<carouselLen; i++){
526614
carouselOl.getElementsByTagName("li")[i].className = "";

0 commit comments

Comments
 (0)