JavaScript_Homework6

JavaScript

JavaScript作业六 HTML5应用

JavaScript作业六

【任务9-1】实现商品详情页面的框架结构

这里写图片描述

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
	<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>漫步时尚广场-商品详情</title>
<link href="css/detail_frame.css" rel="stylesheet" type="text/css">
</head>
<body>
<article id="main"> 
  <!--顶部区域 start-->
  <header class="top_bg">
  </header>
  <!--顶部区域 end--> 
  <!--logo和banner start-->
  <div class="logo">
    <img src="images/logo.jpg" >
    <img src="images/banner.jpg" >
</div>
  <!--logo和banner  end--> 
  <!--菜单导航 start-->
  <nav class="nav_bg"></nav>
     <!--菜单导航 end--> 
     <!--中间部分 start-->
<section>
<div class="main">
      <nav class="menu"></nav>
    <!--中间区 start-->
    <div class="middle">
        <h1 class="pic_title">商品详情</h1>
        <div class="clear"></div>
        <div class="left_pic"></div>
        <article class="tab_content2 none"></article>
        <article class="tab_content3 none"></article>
    <!--品牌活动-->
     <h1 class="pic_title">看了又看</h1>
     <div class="clear"></div>
    <ul class="pic_list4"></ul>
    </div>
    <!--中间区 end--> 
    <!--右侧热门推荐 start-->
    <aside class="right_nav"></aside>
</div>
</section>
 <!--右侧热门推荐 end--> 
  <!--中间部分 end-->
  <footer>
    <div class="clear"></div>
    <div class="foot">
      <div class="foot_title"></div>
      <ul class="foot_list"></ul>
      <div class="clear"></div>
      <div class="foot_line"></div>
     </div>
</footer>
</article>
</body>
</html>

css代码

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
@charset "utf-8";
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000;}
*{padding:0;margin:0}
img{border:none;}
.clear{clear:both;}
.main{margin:10px auto;}
a:hover{color:#ce2626;text-decoration:none;}
/*头部*/
.top_bg{background:#f7f7f7;height:30px;line-height:30px;}
.logo{margin:5px auto;}
.nav_bg{background:#ce2626;width:100%;color:#fff;height:30px;}
a.white:hover{color:#ff0;text-decoration:none;}
/*左侧导航*/
.menu{width:220px;float:left;border:1px solid #e5e4e1;height:350px;
       background-color:#FFC;}
/*中间部分*/
.middle{float:left;width:690px;}
.left_pic{height:200px; background-color:#6CF; margin-bottom:10px;
       margin-left:10px;}
.pic_title{background:#ff9c01;line-height:35px;font-size:14px;
       text-indent:20px;text-align:left;width:680px;float:left;
       color:#fff;margin:0 10px 10px;}
/*右侧公告*/
.right_nav{width:280px;height:270px;border:1px solid #eee;float:right;
       background-color:#fCC;}
/*foot*/
.pic_list4{height:200px; background-color:#CCC;margin-left:10px;}
.foot_title{background:#6a6665;width:100%;height:40px;padding-top:8px;}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px;}
.foot_list{width:100%;margin:0 auto;padding-top:20px; height:60px;
       background-color:#ddd;}

【任务9-2】商品详情页面的整体实现

这里写图片描述

商品详情页面css 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
@charset "utf-8";
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000;}
*{padding:0;margin:0;}
li,ul{list-style:none;}
a{color:#000;text-decoration:none;}
a:hover{color:#ce2626;text-decoration:none;}
img{border:none;}
.font14{font-size:14px;font-weight:700;}
.font16{font-size:16px;font-weight:700;}
.clear{clear:both;}
.floatl{float:left;}
.floatr{float:right;}
.main{margin:10px auto;width:1200px;}
/*头部*/
.top_bg{border-bottom:1px solid #ccc;font-size:12px;font-family:"宋体";
	line-height:30px;background:#f7f7f7;height:30px;line-height:30px;}
.top_content{width:1200px;margin:0 auto;}
.logo{margin:5px auto;width:1200px;}
.nav_bg{background:#ce2626;width:100%;color:#fff;}
.nav_content{width:1200px;margin:0 auto;height:40px;line-height:40px;}
.menu_nav{width:700px;float:left;margin-left:200px;}
.menu_nav li{font-size:16px;font-weight:700;color:#fff;width:80px;float:left;
	text-align:center;margin-right:15px;}
.orange{font-weight:700;color:#f60;}
.nav_active{background:#b12121;}
a.white{color:#fff;text-decoration:none;}
a.white:hover{color:#ff0;text-decoration:none;}
.shopcart{background:url(../images/shoppingcart.png) 	no-repeat;width:16px;height:16px;display:inline-block;float:left;
	margin:5px 5px 0 0;}
/*左侧导航*/
.right_arrow{background:url(../images/arrow_r.jpg) 	no-repeat;width:20px;height:20px;display:inline-block;float:right;}
.menu{width:220px;float:left;border:1px solid #e5e4e1;}
.menu li{float:left;width:220px;border-bottom:1px solid #e5e4e1;height:33px;
	line-height:33px;background:#fafafa;font-size:14px;text-align:left;}
.menu li .title{height:33px;background:#e5e4e1;font-size:15px;
	text-indent:20px;text-align:left;width:100%;line-height:33px;
	display:inline-block;}
.red_dot{font-size:25px;margin-right:10px; width:8px;height:8px;
	display:inline-block;background:url(../images/red_dot.gif) no-repeat;
	margin-left:10px;}
/*中间部分*/
.middle{float:left;width:690px;}
.pic_title{background:#ff9c01;line-height:35px;font-size:14px;
	text-indent:20px;text-align:left;width:680px;float:left;color:#fff;
	margin:0 10px 10px;}
/*右侧公告*/
.right_nav{width:280px;border:1px solid #eee;float:right;}
.notice_title{background:#eee;line-height:35px;font-size:14px;
	text-indent:20px;text-align:left;}
/*foot*/
.foot{width:100%;background:#efefef;height:310px;margin-top:15px;}
.foot_title{background:#6a6665;width:100%;height:40px;padding-top:8px;}
.foot_pic{margin:0 auto;width:1200px;}
.foot_pic li{width:210px;float:left;text-align:center;}
.padding-bottom{padding-bottom:10px;}
.padding-top{padding-top:10px;}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px;}
.line1{background:url(../images/line1.jpg) no-repeat;
	width:20px;height:100px;display:inline-block;}
.red1{background:url(../images/red1.jpg) no-repeat;
	width:35px;height:31px;display:block;}
.red2{background:url(../images/red2.jpg) no-repeat;
	width:35px;height:31px;display:block;}
.red3{background:url(../images/red3.jpg) no-repeat;
	width:35px;height:31px;display:block;}
.foot_list>li{float:left;width:170px;}
.foot_list{width:1100px;margin:0 auto;padding-top:20px;}
.foot_list li ul{padding-left:10px;}
.pic_list3 li{margin:5px;float:left;width:83px;}
.pic_list3 li img{border:1px solid #ccc;}
.pic_list4{margin-left:18px;}
.pic_list4 li{margin:5px;float:left;width:123px;}
.pic_list4 li img{border:1px solid #ccc;}
.small_piclist li{float:left;margin-right:10px;}
.small_piclist li img{width:70px;height:70px;border:1px solid #ccc;}
.left_pic{margin-left:10px;float:left;}
.tab{margin:10px;border-bottom:1px solid #ccc;height:35px;line-height:35px;}
.tab li{width:90px;float:left;font-size:14px;text-align:center;}
.tab_active{border-top:3px solid red;width:100px;font-weight:700;
	background:#f2f2f2;height:33px;border-right:1px solid #ccc;
	border-left:1px solid #ccc;}
.none{display:none;}
.particulars li{display:inline;float:left;height:24px;line-height:24px;
	margin-right:20px;overflow:hidden;text-indent:5px;text-overflow:ellipsis;
	white-space:nowrap;width:206px;}
.price2{font-size:12px;font-weight:700;color:red;text-align:center;}
.tab_content3{width:670px;margin:0 auto;}
.tab_content3 table th{height:30px;background:#f2f2f2;text-align:center;}
.tab_content3 table td{text-align:center;height:40px;
	border-bottom:1px dashed #ccc;}
.right{float:left;}
article,footer,header,nav,section{display:block;}
.tab_content1 section{text-align:center;width:700px;}
.img_border{border:1px solid #ccc;margin-top:10px;}
/* 放大镜部分 */
.left_pic{
    position:relative;
    margin-left:10px;
    float:left
}
#box{
    position: relative;
    margin-bottom: 10px;
    width: 400px;
    height: 400px;
}
#shade{
    position: absolute;
    top: 0px;
    z-index: 1000;
    width: 200px;
    height: 200px;
    filter: alpha(Opacity=70); /*IE设置透明度*/
    -moz-opacity: 0.7; /*火狐设置透明度*/
    opacity: 0.7; /*chrome设置透明度*/
    background-color:#FFC;
    display: none;
}
#canvas{
    position: absolute;
    left: 410px;
    top: 0px;
    display: none;
    background-color:wheat;
    display: none;
}

【任务9-3】使用HTML 5对后台中的商品添加页面进行重构

【任务10-1】实现商品详情页面中的商品切换效果

这里写图片描述
这里写图片描述

此js实现商品切换效果

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
	//切换商品展示区中的图像
function changeGoodsImage(thumb) {
	//设置当前缩略图在商品展示区显示对应的大图
    var showGoodsPicture = document.getElementById("showGoodsPicture");   
    showGoodsPicture.src = thumb.src;
	//获取商品缩略图对应的li元素集合
    var goodsList = document.getElementById("goodsList");
	var items=goodsList.getElementsByTagName("li");
	//遍历li元素集合，将所有的图像边框颜色改为默认样式
    for (var i = 0; i < items.length; i++) {
		var thumbImages=items[i].getElementsByTagName("img");
		thumbImages[0].style.borderColor = "";
    }
	//设置当前缩略图为选中状态
    thumb.style.borderColor = "red";
}
//Tab标签的切换
function changeGoodsInfo(obj){
	var currentSelect=0;
	var goodsTabs=document.getElementById("goodsTabs");
	//获得商品的信息标签（商品详情、商品评价、成交记录）
	var goodsTitles=goodsTabs.getElementsByTagName("li");
	for(var i=0;i<goodsTitles.length;i++){
		goodsTitles[i].className="";
		//判断当前元素对应的位置
		if(obj==goodsTitles[i]){
			currentSelect=i;
		}
	}
	//当前标签处于激活状态
	obj.className="tab_active";
	//设置标签对应的内容部分
	var middleDiv=document.getElementsByClassName("middle");
	var tabCotents=middleDiv[0].getElementsByTagName("article");
	for(var j=0;j<tabCotents.length;j++){
		if(currentSelect==j){
			tabCotents[j].className="tab_content"+(j);
		}else{
			tabCotents[j].className="none tab_content"+(j);
		}
		console.log(tabCotents[j].className);
	}
}
//页面加载时调用
window.onload=function(){
	//默认第一个缩略图为选中状态
	var goodsList=document.getElementById("goodsList");
	var thumb_images=goodsList.getElementsByTagName("li")[0]
		.getElementsByTagName("img");
	changeGoodsImage(thumb_images[0]);
};

【任务10-2】实现商品详情页面中的放大镜效果

这里写图片描述

在10-1的基础上添加并在页面加载时调用放大镜效果函数（将zoomPicture()添加到页面加载调用的函数中）

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
	//获取元素的纵坐标（相对于body）
function getTop(e){
	var offset=e.offsetTop;
	if (e.offsetParent!=null){
		offset+=getTop(e.offsetParent);
	}
	return offset;
}
//获取元素的横坐标（相对于body）
function getLeft(e){
	var offset=e.offsetLeft;
	if(e.offsetParent!=null){
		offset+=getLeft(e.offsetParent);
	}
	return offset;
}

function zoomPicture() {
	var box=document.getElementById("box");
	var showGoodsPicture=document.getElementById("showGoodsPicture");
	var canvas=document.getElementById("canvas");
	var shade=document.getElementById("shade");
	if(showGoodsPicture==null) {
		return false;
	}
	//绑定鼠标移出所触发的事件
	box.onmouseout=function(){
		shade.style.display="none";
		canvas.style.display="none";
		document.body.style.cursor="default";
	};
	//绑定鼠标移动所触发的事件
	box.onmousemove =function(ev){
		//设定鼠标的样式
		document.body.style.cursor="move";
		var box = document.getElementById("box");
		var shadeX, shadeY;
		//获取box对象的左侧到浏览器窗口左侧的距离
		var boxX=getLeft(box);
		//获取box对象的顶部到浏览器窗口顶部的距离
		var boxY=getTop(box);
		//计算阴影区域的左上角的x坐标
		shadeX=ev.pageX-boxX-100;
		//计算阴影区域的左上角的y坐标
		shadeY=ev.pageY-boxY-100;
		//防止阴影区域移到图片之外
		if(shadeX<0){
			shadeX=0;
		}
		else if(shadeX>200){
			shadeX=200;
		}
		if(shadeY<0){
			shadeY=0;
		}
		else if(shadeY>200){
			shadeY=200;
		}
		//使用Canvas绘制遮罩区域，并进行放大
		var context=canvas.getContext("2d");
		shade.style.display="block";
		shade.style.left=shadeX+"px";
		shade.style.top=shadeY+"px";
		canvas.style.display="inline";
		context.clearRect(0, 0, 400, 400);
		var image=new Image();
		image.src=showGoodsPicture.src;
		context.drawImage(image, (shade.offsetLeft) * 2, (shade.offsetTop) * 2, 
				400, 400, 0, 0, 400, 400);
	}
}

【任务10-3】实现购物列表中的购物车拖拽效果

js实现 无法截演示效果

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

//购物车的显示与隐藏
function showCar(){
	var shopCar = document.getElementsByClassName("dropdown")[0];
	var rightNav = document.getElementsByClassName("right_nav")[0];
	switch(shopCar.style.display){
		case "":
		case "none":
			shopCar.style.display = "block";
			rightNav.style.position = "relative";
			//下移热门推荐模块
			//rightNav.style.top = "100px";
			shopCar.innerHTML = loadCar();
			break;
		case "block":
			shopCar.style.display = "none";
			rightNav.style.position = "static";
			break;
	}
}

//定义一个商品对象
var goods={goodsSrc: null, goodsNum: 1};

//设置拖拽效果
function drag(e){
	e=e||event;
	e.dataTransfer.effectAllowed = "copy";
	e.dataTransfer.setData("text", e.target.src);			//IE兼容写法
	//e.dataTransfer.setData("text/plain", e.target.src);	//标准写法
}

//拖拽释放效果
function drop(e){
	//方式拖拽事件传播
	allowDrop(e);
	//从拖拽事件中获取数据
	var data=e.dataTransfer.getData("text");
	if(e.target.id=="dropdown" || e.target.parentNode.id=="dropdown" 
		|| e.target.parentNode.parentNode.id=="dropdown" 
		|| e.target.parentNode.parentNode.parentNode.id=="dropdown" 
		|| e.target.parentNode.parentNode.parentNode
			.parentNode.id=="dropdown"){
		//从localStorage中尝试根据Src读取数据
		var newGoods=readFromStorage(data);
		//如果localStorage中存在当前商品，则在原基础上加1
		if (newGoods!=null){
			for(var i=0; i<localStorage.length; i++){
				if(data==newGoods.goodsSrc) {
					newGoods.goodsNum+=1;
					goods=newGoods;
					break;
				}
			}
		}else{
			//如果localStorage中，没有该商品，创建一个新对象，且商品数量为1
			goods.goodsSrc=data;
			goods.goodsNum=1;
		}
		//把处理后的商品信息存储到localStorage
		localStorage.setItem(data, JSON.stringify(goods));
		//重新加载并刷新页面中的购物车
		document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
	}
}
//阻止被拖拽的图片在新窗口打开
function allowDrop(e){
	e.preventDefault();//通知浏览器不再执行事件相关的默认动作
	e.stopPropagation();//阻止事件冒
}
//根据key读取localStorage的值并封装成JSON
function readFromStorage(key){
	var jsonStr=localStorage.getItem(key);
	var newGoods=JSON.parse(jsonStr);
	return newGoods;
}

//加载购物车
function loadCar(){
	//localStorage不为空时，将购物车中的信息读出来并显示到页面中
	if(localStorage.length!=0){
		var ulObject=document.createElement("ul");
		ulObject.className="shop_pic";
		for(var i=0; i<localStorage.length; i++){
			var key=localStorage.key(i);
			goods=readFromStorage(key);
			if(goods!=null) {
				var liObject=document.createElement("li");
				liObject.innerHTML='<a href="#"><img src="'+goods.goodsSrc
				  +'" width="80px" height="96px"/></a><p>'+goods.goodsNum
				  +'件<a href="javascript:void(0)" 	onclick="delStorage(this)"><span class="orange floatr">删除</span></a></p>';
			}
			ulObject.appendChild(liObject);
		}
		return ulObject.outerHTML;
	}
	return "购物车还是空的，赶快加点东西吧~";
}

//从localStorage中删除某个元素
function delStorage(element){
	//获得被点击的<a>元素的对应的img标签的src属性
	var targetSrc=element.parentNode.parentNode.childNodes[0]
					.childNodes[0].src;
	//根据src属性读取localStorage中的商品
	var delGoods=readFromStorage(targetSrc);
	delGoods.goodsNum-=1;
	//如果商品数量等于0，则移除该商品
	if(delGoods.goodsNum==0){
		localStorage.removeItem(targetSrc);
	}else{
		//如果商品数量大于0，将修改后的信息保存到localStorage中
		localStorage.setItem(targetSrc,JSON.stringify(delGoods));
	}
	//删除成功后，重新加载并更新页面中的购物车
	document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
}

//窗口加载时，为允许拖拽的图片添加draggable属性和ondragstart事件
window.onload=function(){
	var pic_list=document.getElementsByClassName("pic_list")[0];
	var pic_list_div=pic_list.getElementsByTagName("div");
	for(var i=0;i<pic_list_div.length;i++){
		var image=pic_list_div[i].getElementsByTagName("img")[0];
		image.setAttribute("draggable",true);
		image.ondragstart=drag;
	}
}

商品详情页面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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>漫步时尚广场-商品详情</title>
<link href="css/detail.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/goodsOperator.js"></script>
</head>
<body>
<article id="main"> 
  <!--顶部区域 start-->
  <header class="top_bg">
    <div class="top_content">
      <div class="floatl"><img src="images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="#" class="orange">[请登录]</a> <a href="#"  class="orange"> [免费注册]</a></div>
      <div class="floatr">客户服务<img src="images/arrow.gif">&nbsp;网站导航<img src="images/arrow.gif">&nbsp;<span class="droparrow"><span class="shopcart"></span>我的购物车<span class="orange">0</span>件<img src="images/arrow.gif"  /></span></div>
    </div>
  </header>
  <!--顶部区域 end--> 
  <!--logo和banner start-->
  <div class="logo"><a href="../index.html"><img src="images/logo.jpg" ></a><img src="images/banner.jpg" ></div>
  <!--logo和banner  end--> 
  <!--菜单导航 start-->
  <nav class="nav_bg">
    <div class="nav_content">
      <ul class="menu_nav">
        <li ><a href="shoppingIndex.html" class="white">首页</a></li>
        <li><a href="shoppingShow.html"  class="white">最新上架</a></li>
        <li>品牌活动</li>
        <li>原厂直供</li>
        <li>团购</li>
        <li>限时抢购</li>
        <li>促销打折</li>
      </ul>
    </div>
  </nav>
  <!--菜单导航 end--> 
  <!--中间部分 start-->
  <section>
    <div class="main">
      <nav>
        <ul class="menu">
          <li><span class="title">女装</span></li>
          <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >下装</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >连衣裙</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >内衣</a><span class="right_arrow"></span></li>
          <li><span class="title">男装</span></li>
          <li><span class="red_dot"></span><a href="#" >T恤</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >短裤</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >衬衫</a><span class="right_arrow"></span></li>
          <li><span class="title">童装</span></li>
          <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >裤子</a><span class="right_arrow"></span></li>
          <li><span class="title">运动</span></li>
          <li><span class="red_dot"></span><a href="#" >运动裤</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >跑步鞋</a><span class="right_arrow"></span></li>
        </ul>
      </nav>
      <!--购物分类end--> 
      <!--中间区 start-->
      <div class="middle">
        <h1 class="pic_title">商品详情</h1>
        <div class="left_pic">
          <div id="box">
          	<img src="images/showdetail/dd1.jpg" width="400" height="400" id="showGoodsPicture">
            <div id="shade"></div>
          </div>
          <ul class="small_piclist" id="goodsList">
            <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
          </ul>
          <!--canvas不能通过样式设置大小，只能通过属性设置-->
          <canvas id="canvas" width="400px" height="400px"></canvas>
        </div>
        <div class="right">
          <h1 class="font16">冬季新款牛仔外套女中长款加厚<br/>
            女冬装连帽毛领加绒牛仔棉衣女风衣</h1>
          <img src="images/showdetail/pic_mess.jpg"> </div>
        <div class="clear"></div>
        <ul class="tab" id="goodsTabs">
          <li  class="tab_active" onClick="changeGoodsInfo(this)">商品详情</li>
          <li onClick="changeGoodsInfo(this)">商品评价</li>
          <li onClick="changeGoodsInfo(this)">成交记录</li>
        </ul>
        <article class="tab_content1">
          <ul class="particulars">
            <li title=" 修身">服装版型: 修身</li>
            <li title=" 甜美">风格: 甜美</li>
            <li title=" 瑞丽">甜美: 瑞丽</li>
            <li title=" 中长款">衣长: 中长款</li>
            <li title=" 长袖">袖长:长袖</li>
            <li title=" 常规">袖型: 常规</li>
            <li title=" 带帽">领型:带帽</li>
            <li title=" 拉链">衣门襟:拉链</li>
            <li title=" 纯色">图案: 纯色</li>
            <li title=" 81%(含)-90%(含)">成分含量:81%(含)-90%(含)</li>
            <li title=" 棉">质地: 棉</li>
            <li title=" 25-29周岁">适用年龄: 25-29周岁</li>
            <li title=" 2015年冬季">年份季节:2015年冬季</li>
            <li title=" 深蓝色 蓝色">颜色分类: 深蓝色 蓝色</li>
            <li title=" M L XL 2XL">尺码:M L XL 2XL</li>
          </ul>
          <section> <img src="images/showdetail/detail1.jpg"> <img src="images/showdetail/detail2.jpg"> <img src="images/showdetail/dd1.jpg" class="img_border"> <img src="images/showdetail/detail1.jpg" class="img_border"> <img src="images/showdetail/dd1.jpg" class="img_border"><img src="images/showdetail/detail6.jpg" class="img_border"></section>
        </article>
        <article class="tab_content2 none"><img src="images/showdetail/pinglun.jpg"/></article>
        <article class="tab_content3 none">
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th>买家</th>
                <th>淘宝价</th>
                <th>数量</th>
                <th>付款时间</th>
                <th>款式和型号</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> a**男 (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-31 20:08:39 </td>
                <td><div>
                    <p>颜色分类:深蓝色[胸前格纹]</p>
                    <p>尺码:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> 闺**你 (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-27 14:05:17 </td>
                <td><div>
                      <p>颜色分类:蓝色[口袋格纹]</p>
                    <p>尺码:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> w**0 (匿名)</td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-23 12:33:54 </td>
                <td><div>
                   <p>颜色分类:深蓝色[胸前格纹]</p>
                    <p>尺码:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> a**u (匿名)</td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-23 12:04:19 </td>
                <td><div>
                     <p>颜色分类:蓝色[口袋格纹]</p>
                    <p>尺码:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> 落**1 (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-22 21:39:27 </td>
                <td><div>
                  <p>颜色分类:深蓝色[胸前格纹]</p>
                    <p>尺码:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> 6**s (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-12 15:00:30 </td>
                <td><div>
                   <p>颜色分类:蓝色[口袋格纹]</p>
                    <p>尺码:L</p>
                  </div></td>
              </tr>
            </tbody>
          </table>
        </article>
        <!--品牌活动-->
        <article>
            <h1 class="pic_title">看了又看</h1>
            <ul class="pic_list4">
              <li><img src="images/showdetail/ss1.jpg" title="2015新款条纹显瘦V领短袖露背宽松连身裤"/>
                <p>2015新款条纹显瘦V领短袖露背宽松连身裤</p>
              </li>
              <li><img src="images/showdetail/ss1.jpg" title="2015女士新款百搭休闲阔腿裤高腰红色短裤"/>
                <p>2015女士新款百搭休闲阔腿裤高腰红色短裤</p>
              </li>
              <li><img src="images/showdetail/ss1.jpg" title="女版街头个性休闲口袋纯色卫衣吊带哈伦裤"/>
                <p>女版街头个性休闲口袋纯色卫衣吊带哈伦裤</p>
              </li>
              <li><img src="images/showdetail/ss1.jpg" title="韩版简约百搭五分袖喇叭袖圆领打底短袖"/>
                <p>韩版简约百搭五分袖喇叭袖圆领打底短袖</p>
              </li>
              <li><img src="images/showdetail/ss1.jpg" title="卡玛娅秋装新款女装 圆领纯棉上衣棉T恤" />
                <p>卡玛娅秋装新款女装 圆领纯棉上衣棉T恤</p>
              </li>
            </ul>
        <article>
      </div>
      <!--中间区 end--> 
      <!--右侧热门推荐 start-->
      <aside class="right_nav">
        <h1 class="notice_title"> 热门推荐 </h1>
        <ul class="pic_list3">
          <ul>
            <li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
              <p class="price2">￥56.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
              <p class="price2">￥97.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
              <p class="price2">￥89.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s4.jpg" /></a>
              <p class="price2">￥69.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s5.jpg" /></a>
              <p class="price2">￥89.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
              <p class="price2">￥93.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
              <p class="price2">￥58.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
              <p class="price2">￥69.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s9.jpg" /></a>
              <p class="price2">￥78.00元</p>
            </li>
          </ul>
        </ul>
      </aside>
    </div>
  </section>
  <!--右侧热门推荐 end--> 
  <!--中间部分 end-->
  <footer>
    <div class="clear"></div>
    <div class="foot">
      <div class="foot_title">
        <ul class="foot_pic">
          <li><img src="images/gray1.jpg" ></li>
          <li><img src="images/gray2.jpg" ></li>
          <li><img src="images/gray3.jpg" ></li>
          <li><img src="images/gray4.jpg" ></li>
          <li><img src="images/gray5.jpg" ></li>
        </ul>
      </div>
      <ul class="foot_list">
        <li>
          <div class="floatl">
            <p class="red1"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">新手指导</li>
            <li>用户注册</li>
            <li>电话下单</li>
            <li>购物流程</li>
            <li>购物保障</li>
            <li>服务协议</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red2"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">支付方式</li>
            <li>货到付款</li>
            <li>商城卡支付</li>
            <li>支付宝、网银支付</li>
            <li>优惠券抵用</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">配送方式</li>
            <li>闪电发货</li>
            <li>满百包邮</li>
            <li>配送范围及时间</li>
            <li>商品验收及签收</li>
            <li>服务协议</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">售后服务</li>
            <li>退换货协议</li>
            <li>关于发票</li>
            <li>退换货流程</li>
            <li>退换货运费</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">关于帐号</li>
            <li>修改个人信息</li>
            <li>修改密码</li>
            <li>找回密码</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">优惠活动</li>
            <li>竞拍须知</li>
            <li>抢购须知</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="foot_line"></div>
      <p align="center" class="padding-top">Copyright  2015-2020  Q- Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<Br/>
        中国青岛 高新区河东路8888号  青软教育集团    咨询热线：400-658-0166  400-658-1022 </p>
      <p align="center"><img src="images/foot_pic.jpg"></p>
      <div class="clear"></div>
    </div>
  </footer>
</article>
</body>
</html>

本文标题:JavaScript_Homework6

文章作者:mao

发布时间:2018-05-08, 23:15:00

最后更新:2018-05-08, 23:54:49

原始链接:https://maojinkang.github.io/2018/05/08/JavaScript_Homework6/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. JavaScript作业六 HTML5应用
  2. 2. 【任务9-1】实现商品详情页面的框架结构
  3. 3. 【任务9-2】商品详情页面的整体实现
  4. 4. 【任务9-3】使用HTML 5对后台中的商品添加页面进行重构
  5. 5. 【任务10-1】实现商品详情页面中的商品切换效果
  6. 6. 【任务10-2】实现商品详情页面中的放大镜效果
  7. 7. 【任务10-3】实现购物列表中的购物车拖拽效果
  8. 8. 商品详情页面html代码