├── .idea
    ├── .name
    ├── encodings.xml
    ├── imitateWeb.iml
    ├── modules.xml
    ├── scopes
    │   └── scope_settings.xml
    └── vcs.xml
├── .project
├── README.md
├── css
    ├── YUIcssreset.css
    ├── main.css
    └── resetcss.css
├── good.html
├── goodDetail.html
├── img
    ├── 1.jpg
    ├── 1.png
    ├── 2.jpg
    ├── 2.png
    ├── 3.jpg
    ├── 3.png
    ├── 4.jpg
    ├── 4.png
    ├── 5.png
    ├── arrb.png
    ├── arrbot.png
    ├── arrt.png
    ├── arrtop.png
    ├── bag.png
    ├── good1.jpg
    ├── good2.jpg
    ├── good3.jpg
    ├── good4.jpg
    ├── good5.jpg
    ├── heart.png
    ├── horse.ico
    ├── mask.png
    ├── r1.jpg
    ├── r2.jpg
    ├── r3.jpg
    └── r4.jpg
├── index.html
└── js
    ├── good.js
    ├── home.js
    ├── jquery-2.1.4.js
    ├── mejqzoom.js
    └── publicgood.js


/.idea/.name:
--------------------------------------------------------------------------------
1 | imitateWeb


--------------------------------------------------------------------------------
/.idea/encodings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="Encoding" useUTFGuessing="true" native2AsciiForPropertiesFiles="false">
4 |     <file url="PROJECT" charset="UTF-8" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/imitateWeb.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager">
4 |     <content url="file://$MODULE_DIR$" />
5 |     <orderEntry type="inheritedJdk" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |   </component>
8 | </module>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/imitateWeb.iml" filepath="$PROJECT_DIR$/.idea/imitateWeb.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/scopes/scope_settings.xml:
--------------------------------------------------------------------------------
1 | <component name="DependencyValidationManager">
2 |   <state>
3 |     <option name="SKIP_IMPORT_STATEMENTS" value="false" />
4 |   </state>
5 | </component>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.project:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <projectDescription>
 3 | 	<name>imitateWeb</name>
 4 | 	<comment>Create By HBuilder</comment>
 5 | 	<projects>
 6 | 	</projects>
 7 | 	<buildSpec>
 8 | 		<buildCommand>
 9 | 			<name>com.aptana.ide.core.unifiedBuilder</name>
10 | 			<arguments>
11 | 			</arguments>
12 | 		</buildCommand>
13 | 	</buildSpec>
14 | 	<natures>
15 | 		<nature>com.aptana.projects.webnature</nature>
16 | 	</natures>
17 | 	<filteredResources>
18 | 		<filter>
19 | 			<id>1447398832467</id>
20 | 			<name></name>
21 | 			<type>10</type>
22 | 			<matcher>
23 | 				<id>org.eclipse.ui.ide.orFilterMatcher</id>
24 | 				<arguments>
25 | 					<matcher>
26 | 						<id>org.eclipse.ui.ide.multiFilter</id>
27 | 						<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
28 | 					</matcher>
29 | 					<matcher>
30 | 						<id>org.eclipse.ui.ide.multiFilter</id>
31 | 						<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
32 | 					</matcher>
33 | 				</arguments>
34 | 			</matcher>
35 | 		</filter>
36 | 	</filteredResources>
37 | </projectDescription>
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #### HTML+CSS+JS实现购物网站前端开发
2 |     作为学生党，生活用品、服饰、鞋包几乎都是在网上购买，在需要购买时经常会去淘宝、京东、唯品会等购物网去逛逛。
3 |     因此参考这些网站的设计写了一个简单的购物网站前端开发部分，该购物网站界面布局完全基于HTML+CSS，并结合JS实现一些特效，
4 |     如：轮播图、选项卡和图片放大镜等。这个购物网站只实现了一些基本的功能模块，距离真正的购物网站还有很大的差距，
5 |     需要不断的完善和增加新的模块。现在分享给大家。
6 | ####详细介绍请见我的博客
7 | [点击链接进入](http://y.dobit.top/Detail/160.html)
8 | 


--------------------------------------------------------------------------------
/css/YUIcssreset.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	TODO will need to remove settings on HTML since we can't namespace it.
  3 | 	TODO with the prefix, should I group by selector or property for weight savings?
  4 | */
  5 | html {
  6 |     color: #000;
  7 |     background: #FFF;
  8 | }
  9 | 
 10 | /*
 11 | 	TODO remove settings on BODY since we can't namespace it.
 12 | */
 13 | /*
 14 | 	TODO test putting a class on HEAD.
 15 | 		- Fails on FF.
 16 | */
 17 | body,
 18 | div,
 19 | dl,
 20 | dt,
 21 | dd,
 22 | ul,
 23 | ol,
 24 | li,
 25 | h1,
 26 | h2,
 27 | h3,
 28 | h4,
 29 | h5,
 30 | h6,
 31 | pre,
 32 | code,
 33 | form,
 34 | fieldset,
 35 | legend,
 36 | input,
 37 | textarea,
 38 | p,
 39 | blockquote,
 40 | th,
 41 | td {
 42 |     margin: 0;
 43 |     padding: 0;
 44 | }
 45 | 
 46 | table {
 47 |     border-collapse: collapse;
 48 |     border-spacing: 0;
 49 | }
 50 | 
 51 | fieldset,
 52 | img {
 53 |     border: 0;
 54 | }
 55 | 
 56 | /*
 57 | 	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
 58 | */
 59 | address,
 60 | caption,
 61 | cite,
 62 | code,
 63 | dfn,
 64 | em,
 65 | strong,
 66 | th,
 67 | var {
 68 |     font-style: normal;
 69 |     font-weight: normal;
 70 | }
 71 | 
 72 | ol,
 73 | ul {
 74 |     list-style: none;
 75 | }
 76 | 
 77 | caption,
 78 | th {
 79 |     text-align: left;
 80 | }
 81 | 
 82 | h1,
 83 | h2,
 84 | h3,
 85 | h4,
 86 | h5,
 87 | h6 {
 88 |     font-size: 100%;
 89 |     font-weight: normal;
 90 | }
 91 | 
 92 | q:before,
 93 | q:after {
 94 |     content: '';
 95 | }
 96 | 
 97 | abbr,
 98 | acronym {
 99 |     border: 0;
100 |     font-variant: normal;
101 | }
102 | 
103 | /* to preserve line-height and selector appearance */
104 | sup {
105 |     vertical-align: text-top;
106 | }
107 | 
108 | sub {
109 |     vertical-align: text-bottom;
110 | }
111 | 
112 | input,
113 | textarea,
114 | select {
115 |     font-family: inherit;
116 |     font-size: inherit;
117 |     font-weight: inherit;
118 |     *font-size: 100%; /*to enable resizing for IE*/
119 | }
120 | 
121 | /*because legend doesn't inherit in IE */
122 | legend {
123 |     color: #000;
124 | }


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
  1 | /*重用样式：多个页面可以公用的样式*/
  2 | /*头部*/
  3 | body {
  4 |     overflow-x: hidden; /*当浏览器调正的宽度小于页面宽度时，不显示横向滚动条*/
  5 |     font-family: "microsoft yahei";
  6 | }
  7 | 
  8 | a {
  9 |     font-size: 13px;
 10 |     text-decoration: none;
 11 | }
 12 | 
 13 | #header, .link {
 14 |     height: 35px;
 15 | }
 16 | 
 17 | #header {
 18 |     width: 100%;
 19 |     background-color: #cc6688;
 20 |     position: fixed;
 21 |     z-index: 10;
 22 |     border-bottom: 1px solid #f5f5f5;
 23 | }
 24 | 
 25 | /*响应式布局，当浏览器页面宽度小于等于顶部导航条指定宽度时，固定为指定宽度*/
 26 | @media screen and (max-width: 880px) {
 27 |     #header {
 28 |         width: 880px;
 29 |     }
 30 | }
 31 | 
 32 | #leftlist {
 33 |     float: left;
 34 |     margin-left: 100px;
 35 | }
 36 | 
 37 | #rightlist {
 38 |     float: right;
 39 |     margin-right: 100px;
 40 | }
 41 | 
 42 | .list > li {
 43 |     float: left;
 44 |     position: relative;
 45 | }
 46 | 
 47 | .link {
 48 |     display: block;
 49 |     padding: 0px 8px;
 50 |     line-height: 35px;
 51 |     color: white;
 52 | }
 53 | 
 54 | .link:hover {
 55 |     color: black;
 56 | }
 57 | 
 58 | .haschild:hover .link {
 59 |     background-color: white;
 60 |     color: black;
 61 | }
 62 | 
 63 | /*显示下拉菜单*/
 64 | .haschild:hover .showdetail {
 65 |     display: block;
 66 |     border-width: 1px;
 67 |     border-style: solid;
 68 |     border-color: transparent gainsboro gainsboro gainsboro;
 69 | }
 70 | 
 71 | .showdetail {
 72 |     position: absolute;
 73 |     top: 35px;
 74 |     left: -1px;
 75 |     display: none;
 76 |     background-color: white;
 77 | }
 78 | 
 79 | .item {
 80 |     color: black;
 81 |     display: block;
 82 |     padding-left: 5px;
 83 |     width: 75px;
 84 |     height: 24px;
 85 |     line-height: 24px;
 86 | }
 87 | 
 88 | .item:hover {
 89 |     background: gainsboro;
 90 | }
 91 | 
 92 | .biglist {
 93 |     left: -643px;
 94 |     width: 700px;
 95 |     padding: 5px;
 96 | }
 97 | 
 98 | .listblock {
 99 |     float: left;
100 |     width: 230px;
101 | }
102 | 
103 | .shoptitle {
104 |     margin-left: 20px;
105 |     color: royalblue;
106 | }
107 | 
108 | .listblock li {
109 |     float: left;
110 |     width: 75px;
111 |     height: 26px;
112 |     line-height: 26px;
113 |     text-align: center;
114 | }
115 | 
116 | .items {
117 |     color: black;
118 | }
119 | 
120 | .items:hover {
121 |     color: royalblue;
122 | }
123 | 
124 | .centerblock {
125 |     border-left: 1px solid gainsboro;
126 |     border-right: 1px solid gainsboro;
127 | }
128 | 
129 | /*中间内容部分*/
130 | #content {
131 |     width: 1192px;
132 |     margin: 0px auto 10px auto;
133 |     overflow: hidden;
134 |     padding-top: 50px;
135 | }
136 | 
137 | #search {
138 |     width: 407px;
139 |     margin: 0px auto;
140 | }
141 | 
142 | #select, #btnquery {
143 |     outline: none; /*去除轮廓线，即点击时输入内容时外面的蓝线*/
144 | }
145 | 
146 | #select {
147 |     border-width: 2px 0 2px 2px;
148 |     border-color: #cc6688;
149 |     border-style: solid;
150 |     width: 300px;
151 |     height: 34px;
152 |     line-height: 34px;
153 | }
154 | 
155 | #btnquery {
156 |     width: 100px;
157 |     height: 38px;
158 |     line-height: 38px;
159 |     background-color: #cc6688;
160 |     border: none; /*去掉按钮边框，不然会有阴影*/
161 |     font-size: medium;
162 |     letter-spacing: 5px; /*两字之间的间距*/
163 |     text-indent: 5px;
164 |     font-weight: bold;
165 |     color: #FFF;
166 |     /*默认input和button之间有间距，设置left之去除两者之间间距，使它们相连接*/
167 |     position: relative;
168 |     left: -5px;
169 | }
170 | 
171 | /*底部*/
172 | #footer {
173 |     margin: 30px auto 10px auto;
174 |     width: 1192px;
175 |     height: 30px;
176 |     line-height: 30px;
177 |     text-align: center;
178 |     color: gray;
179 |     border-top: 2px solid #cc6688;
180 | }
181 | 
182 | /*细节样式：每部分表现各自的样式*/
183 | #catalog, #menus, #turnimg, #notice, #showgoods {
184 |     margin: 15px 10px 0 0;
185 |     overflow: hidden;
186 |     float: left;
187 | }
188 | 
189 | #catalog {
190 |     width: 190px;
191 |     height: 570px;
192 |     border: 1px solid #cc6688;
193 | }
194 | 
195 | #goods, h3 {
196 |     width: 100%;
197 |     height: 35px;
198 |     line-height: 35px;
199 |     font-weight: bold;
200 | }
201 | 
202 | #goods {
203 |     color: white;
204 |     background-color: #cc6688;
205 |     text-indent: 10px;
206 | }
207 | 
208 | h3 {
209 |     font-size: 15px;
210 |     text-indent: 40px;
211 |     background-image: url("../img/heart.png");
212 |     background-position: 10px center;
213 |     background-repeat: no-repeat;
214 | }
215 | 
216 | #catalog ul {
217 |     overflow: hidden;
218 | }
219 | 
220 | #catalog li {
221 |     float: left;
222 | }
223 | 
224 | .linkbrand {
225 |     display: block;
226 |     padding: 8px;
227 |     color: black;
228 | }
229 | 
230 | .linkbrand:hover {
231 |     font-weight: bold;
232 | }
233 | 
234 | .hotgood {
235 |     color: red;
236 |     position: relative;
237 | }
238 | 
239 | /*伪元素构造hot图标*/
240 | .hotgood:after {
241 |     content: 'hot';
242 |     display: block;
243 |     position: absolute;
244 |     width: 21px;
245 |     height: 13px;
246 |     line-height: 13px;
247 |     font-size: 5px;
248 |     background-color: coral;
249 |     color: black;
250 |     top: 0px;
251 |     right: -10px;
252 |     -webkit-border-radius: 5px;
253 |     -moz-border-radius: 5px;
254 |     border-radius: 5px;
255 | }
256 | 
257 | #menus {
258 |     width: 980px;
259 |     height: 35px;
260 |     border-bottom: 2px solid #cc6688;
261 | }
262 | 
263 | #menus li {
264 |     float: left;
265 | }
266 | 
267 | .menu {
268 |     display: block;
269 |     padding: 0px 20px;
270 |     height: 35px;
271 |     line-height: 35px;
272 |     font-size: medium;
273 |     color: black;
274 |     font-weight: bold;
275 | }
276 | 
277 | .menu:hover {
278 |     color: #cc6688;
279 | 
280 | }
281 | 
282 | #turnimg, #turnimg img {
283 |     width: 660px;
284 |     height: 360px;
285 | }
286 | 
287 | #turnimg, #notice, #showgoods {
288 |     position: relative;
289 |     margin-top: 10px;
290 | }
291 | 
292 | #imgs {
293 |     width: 10000px;
294 |     height: 360px;
295 |     position: absolute;
296 |     left: 0px;
297 |     -webkit-transition: left 1s;
298 |     -moz-transition: left 1s;
299 |     -o-transition: left 1s;
300 |     -ms-transition: left 1s;
301 |     transition: left 1s;
302 | }
303 | 
304 | #imgs li {
305 |     float: left;
306 | }
307 | 
308 | #circles {
309 |     width: 100%;
310 |     height: 20px;
311 |     line-height: 20px;
312 |     position: absolute;
313 |     bottom: 0px;
314 |     text-align: center;
315 | }
316 | 
317 | #circles > li {
318 |     display: inline-block;
319 |     width: 10px;
320 |     height: 10px;
321 |     margin-right: 5px;
322 |     -webkit-border-radius: 5px;
323 |     -moz-border-radius: 5px;
324 |     border-radius: 5px;
325 | }
326 | 
327 | .circle {
328 |     background-color: black;
329 | }
330 | 
331 | .currimg {
332 |     background-color: white;
333 | }
334 | 
335 | .arr {
336 |     width: 40px;
337 |     height: 40px;
338 |     line-height: 40px;
339 |     background-color: black;
340 |     position: absolute;
341 |     top: 50%;
342 |     margin-top: -20px;
343 |     opacity: 0.5;
344 |     display: none;
345 |     -webkit-transition: opacity 0.5s;
346 |     -moz-transition: opacity 0.5s;
347 |     -o-transition: opacity 0.5s;
348 |     -ms-transition: opacity 0.5s;
349 |     transition: opacity 0.5s;
350 | }
351 | 
352 | #turnimg:hover .arr {
353 |     display: block;
354 |     cursor: pointer;
355 | }
356 | 
357 | .left {
358 |     left: 10px;
359 | }
360 | 
361 | .right {
362 |     right: 10px;
363 | }
364 | 
365 | #leftarr, #rightarr {
366 |     width: 10px;
367 |     height: 10px;
368 |     border-top: 2px solid white;
369 |     border-left: 2px solid white;
370 |     position: relative;
371 |     top: 13px;
372 |     left: 13px;
373 | }
374 | 
375 | #leftarr {
376 |     -webkit-transform: rotate(-45deg);
377 |     -moz-transform: rotate(-45deg);
378 |     -ms-transform: rotate(-45deg);
379 |     -o-transform: rotate(-45deg);
380 |     transform: rotate(-45deg);
381 | 
382 | }
383 | 
384 | #rightarr {
385 |     -webkit-transform: rotate(135deg);
386 |     -moz-transform: rotate(135deg);
387 |     -ms-transform: rotate(135deg);
388 |     -o-transform: rotate(135deg);
389 |     transform: rotate(135deg);
390 | }
391 | 
392 | #notice {
393 |     width: 308px;
394 |     height: 360px;
395 |     border: 1px solid #e4e4e4;
396 | }
397 | 
398 | h1 {
399 |     width: 100%;
400 |     height: 40px;
401 |     line-height: 40px;
402 |     background-color: #f5f5f5;
403 |     padding-left: 10px;
404 |     position: relative;
405 | }
406 | 
407 | #more, .notice, .tab {
408 |     color: black;
409 | }
410 | 
411 | #more {
412 |     position: absolute;
413 |     right: 20px;
414 | }
415 | 
416 | .notice {
417 |     padding-left: 10px;
418 |     display: block;
419 |     height: 25px;
420 |     line-height: 25px;
421 | }
422 | 
423 | .notice span {
424 |     font-weight: bold;
425 | }
426 | 
427 | #status {
428 |     padding-bottom: 5px;
429 |     border-bottom: 1px solid #e4e4e4;
430 | }
431 | 
432 | .notice:hover, #more:hover {
433 |     color: #cc6688;
434 | }
435 | 
436 | #tabs {
437 |     margin-top: 15px;
438 |     width: 100%;
439 |     height: 176px;
440 |     overflow: hidden;
441 |     position: relative;
442 | }
443 | 
444 | #tabs li {
445 |     float: left;
446 | }
447 | 
448 | .tab {
449 |     display: block;
450 |     width: 76.25px;
451 |     height: 30px;
452 |     line-height: 30px;
453 |     background-color: #f5f5f5;
454 |     text-align: center;
455 |     border-top: 1px solid #e4e4e4;
456 |     border-bottom: 1px solid #e4e4e4;;
457 | }
458 | 
459 | .border {
460 |     border-right: 1px solid #e4e4e4;
461 | }
462 | 
463 | .tabctn {
464 |     width: 100%;
465 |     height: 156px;
466 |     position: absolute;
467 |     top: 31px;
468 |     left: 0px;
469 |     display: none;
470 | }
471 | 
472 | .active {
473 |     display: block;
474 | }
475 | 
476 | .activelink {
477 |     background-color: white;
478 |     border-bottom: 0px;
479 | }
480 | 
481 | .tabctn p {
482 |     margin-top: 10px;
483 |     text-indent: 10px;
484 |     font-size: 13px;
485 | }
486 | 
487 | /*#tabs li:hover .tab {
488 |     background-color: white;
489 |     border-bottom: 0px;
490 | }
491 | 
492 | #tabs li:hover .tabctn {
493 |     display: block;
494 | }*/
495 | 
496 | #showgoods {
497 |     width: 980px;
498 |     height: 150px;
499 |     overflow: hidden;
500 | }
501 | 
502 | #showgoods li {
503 |     float: left;
504 |     position: relative;
505 |     border: 1px solid #cc6688;
506 |     border-right: 0px;
507 | }
508 | 
509 | #showgoods ul {
510 |     width: 100000px;
511 |     height: 148px;
512 |     position: absolute;
513 |     left: 0px;
514 | }
515 | 
516 | #showgoods li, #showgoods img {
517 |     width: 138.9px;
518 |     height: 148px;
519 | }
520 | 
521 | /*详情页*/
522 | #shop {
523 |     width: 90%;
524 |     overflow: hidden;
525 |     padding: 0px 5%;
526 | }
527 | 
528 | #shop > a {
529 |     color: black;
530 | }
531 | 
532 | #shopname, .query {
533 |     height: 48px;
534 |     line-height: 48px;
535 | }
536 | 
537 | #shopname {
538 |     float: left;
539 |     font-size: large;
540 |     background-image: url("../img/bag.png");
541 |     background-position: 0px center;
542 |     background-repeat: no-repeat;
543 |     padding-left: 50px;
544 | }
545 | 
546 | .query {
547 |     float: right;
548 | }
549 | 
550 | #shopmenus {
551 |     width: 100%;
552 |     height: 40px;
553 |     line-height: 40px;
554 |     background-color: rgba(39, 39, 39, 0.81);
555 |     margin-top: 20px;
556 |     text-align: center;
557 | }
558 | 
559 | #smenus > li {
560 |     position: relative;
561 |     display: inline-block;
562 |     /*兼容IE6、7行内块级元素*/
563 |     *display: inline;;
564 |     *zoom: 1;
565 | 
566 | }
567 | 
568 | .smenu {
569 |     display: block;
570 |     width: 100px;
571 |     color: white;
572 |     font-size: 15px;
573 | }
574 | 
575 | .smenu:hover {
576 |     background-color: crimson;
577 | }
578 | 
579 | .hasmenu:hover .catalogs {
580 |     display: block;
581 | }
582 | 
583 | .hasmenu:hover .smenu {
584 |     background-color: crimson;
585 | }
586 | 
587 | .hasmenutwo:hover .twocatalog {
588 |     display: block;
589 | }
590 | 
591 | .catalogs, .twocatalog {
592 |     position: absolute;
593 |     background-color: white;
594 |     display: none;
595 |     z-index: 50;
596 | }
597 | 
598 | .catalogs {
599 |     top: 40px;
600 |     left: -1px;
601 | }
602 | 
603 | .twocatalog {
604 |     top: 0px;
605 |     left: 142px;
606 | }
607 | 
608 | .class {
609 |     display: block;
610 |     width: 130px;
611 |     height: 25px;
612 |     line-height: 25px;
613 |     color: black;
614 |     padding-left: 10px;
615 |     text-align: left;
616 |     border: 1px solid #e4e4e4;
617 |     border-top: 0px;
618 | }
619 | 
620 | .class:hover {
621 |     background-color: #e4e4e4;
622 | }
623 | 
624 | #goodshow {
625 |     width: 1190px;
626 |     height: 520px;
627 |     border: 1px solid #e4e4e4;
628 |     margin-top: 30px;
629 | }
630 | 
631 | #imags, #imgtxt, #recommend {
632 |     float: left;
633 |     overflow: hidden; /*否则超出宽度图片还是会显示，清除浮动*/
634 |     margin: 20px;
635 | }
636 | /*以下是商品详情页1左侧图片显示样式设置*/
637 | #imags, #bigimgs, #bigimgs li, #bigimgs img, #smallimgs {
638 |     width: 400px;
639 | }
640 | 
641 | #bigimgs > ul {
642 |     width: 100000px; /*存储所有图片，通过位置切换显示*/
643 |     position: absolute;
644 |     left: 0px;
645 | }
646 | #bigimgs,#bigimgs li, #bigimgs img, #bigimgs > ul {
647 |     height: 400px;
648 | }
649 | #bigimgs {
650 |     position: relative;
651 | }
652 | #imags li {
653 |     float: left;
654 | }
655 | #smallimgs img, #smallimgs li {
656 |     width: 70px;
657 |     height: 70px;
658 | }
659 | 
660 | #smallimgs li {
661 |     margin: 10px 5px 0 0;
662 |     border: 2px solid transparent;
663 | }
664 | /*商品详情页1左侧图片显示样式设置结束*/
665 | 
666 | 
667 | #imgtxt {
668 |     width: 500px;
669 | }
670 | 
671 | #imgtxt h2 {
672 |     font-weight: bold;
673 |     font-size: medium;
674 |     padding-bottom: 10px;
675 | }
676 | 
677 | .goodinfo {
678 |     padding-bottom: 8px;
679 |     font-size: 13px;
680 | }
681 | 
682 | .block {
683 |     display: inline-block;
684 |     *display: inline;
685 |     *zoom: 1;
686 |     width: 35px;
687 |     height: 35px;
688 |     line-height: 35px;
689 |     text-align: center;
690 |     border: 1px solid #e4e4e4;
691 |     margin-right: 8px;
692 | }
693 | 
694 | .blockactive {
695 |     border: 1px solid #cc6688;
696 | }
697 | 
698 | .block:hover {
699 |     border: 1px solid #cc6688;
700 | }
701 | 
702 | .price {
703 |     font-size: large;
704 |     color: #cc6688;
705 |     font-weight: bold;
706 | }
707 | 
708 | #num {
709 |     width: 60px;
710 |     height: 30px;
711 | }
712 | 
713 | .btngood {
714 |     border: none;
715 |     outline: none;
716 |     background-color: #cc6688;
717 |     width: 120px;
718 |     height: 35px;
719 |     font-size: medium;
720 |     color: white;
721 | }
722 | 
723 | #recommend {
724 |     width: 170px;
725 |     text-align: center;
726 | }
727 | 
728 | #recommend h2 {
729 |     width: 100%;
730 |     height: 26px;
731 |     line-height: 26px;
732 |     border-bottom: 1px dashed black;
733 |     margin-bottom: 5px;
734 | }
735 | 
736 | #rgood {
737 |     position: relative;
738 |     width: 100%;
739 |     height: 420px;
740 |     overflow: hidden;
741 | }
742 | 
743 | #rgood > ul {
744 |     position: absolute;
745 |     top: 0px;
746 |     left: 35px;
747 |     height: 10000px;
748 |     -webkit-transition: top 1s;
749 |     -moz-transition: top 1s;
750 |     -o-transition: top 1s;
751 |     -ms-transition: top 1s;
752 |     transition: top 1s;
753 | }
754 | 
755 | #recommend li {
756 |     position: relative;
757 |     margin-bottom: 5px;
758 | }
759 | 
760 | #recommend img, #recommend li {
761 |     width: 100px;
762 |     height: 100px;
763 | }
764 | 
765 | .showprice {
766 |     position: absolute;
767 |     width: 100px;
768 |     height: 15px;
769 |     line-height: 15px;
770 |     bottom: 0px;
771 |     background-color: #e4e4e4;
772 |     opacity: 0.9;
773 |     font-size: 12px;
774 | }
775 | 
776 | #arrow {
777 |     width: 100%;
778 |     text-align: center;
779 |     margin-top: 5px;
780 | }
781 | 
782 | #arrtop, #arrbot {
783 |     display: inline-block;
784 |     width: 24px;
785 |     height: 24px;
786 |     background-position: center center;
787 |     background-repeat: no-repeat;
788 | }
789 | 
790 | #arrtop {
791 |     background-image: url('../img/arrtop.png');
792 | }
793 | 
794 | #arrbot {
795 |     background-image: url('../img/arrbot.png');
796 | }
797 | 
798 | #showbigimg {
799 |     position: absolute;
800 |     margin: auto;
801 |     left: 0px;
802 |     top: 0px;
803 |     right: 0px;
804 |     bottom: 0px;
805 |     width: 800px;
806 |     height: 500px;
807 |     line-height: 500px;
808 |     text-align: center;
809 |     background: black;
810 |     overflow: hidden;
811 |     display: none;
812 |     z-index: 100;
813 | }
814 | 
815 | #showbigimg img {
816 |     width: 600px;
817 |     height: 500px;
818 | }
819 | 
820 | .imgbox {
821 |     width: 400px;
822 |     height: 400px;
823 |     position: relative;
824 | }
825 | 
826 | .smallimg,
827 | #smallimg {
828 |     width: 100%;
829 |     height: 100%;
830 | }
831 | 
832 | .smallimg {
833 |     display: block;
834 | }
835 | 
836 | 
837 | /*以下是详情2页面的左侧图片显示样式设置*/
838 | .bigbox {
839 |     position: absolute;
840 |     top: 0px;
841 |     left: 420px;
842 |     width: 400px;
843 |     height: 400px;
844 |     border: 1px solid #CCC;
845 |     display: none;
846 |     overflow: hidden;
847 | }
848 | 
849 | #bimg {
850 |     position: absolute;
851 |     width: 1000px;
852 |     height: 1000px;;
853 | }
854 | 
855 | #layer {
856 |     width: 128px;
857 |     height: 128px;
858 |     background: url(../img/mask.png) repeat 0 0;
859 |     position: absolute;
860 |     top: 0px;
861 |     left: 0px;
862 |     visibility: hidden;
863 |     cursor: move;
864 | }
865 | 
866 | .imgsbox {
867 |     width: 400px;
868 |     height: 84px;
869 |     position: relative;
870 | }
871 | 
872 | #imgslist {
873 |     list-style-type: none;
874 |     width: 100%;
875 |     position: absolute;
876 |     left: 0px;
877 |     top: 0px;
878 | }
879 | 
880 | .imglist {
881 |     float: left;
882 |     margin: 10px 5px 0 0;
883 |     border: 2px solid transparent;
884 | }
885 | 
886 | .selected {
887 |     border: 2px solid #cc6688;
888 | }
889 | 
890 | .imglist,
891 | .simg {
892 |     width: 70px;
893 |     height: 70px;
894 | }
895 | 
896 | /*详情2页面的左侧图片显示样式设置结束*/


--------------------------------------------------------------------------------
/css/resetcss.css:
--------------------------------------------------------------------------------
 1 | /*全局样式：重置各个浏览器默认的样式，使页面在不同浏览器中表现一致*/
 2 | /*基于YUI重置CSS样式*/
 3 | 
 4 | html {
 5 | 	color: #000;
 6 | 	background: #FFF;
 7 | }
 8 | body,
 9 | div,
10 | dl,
11 | dt,
12 | dd,
13 | ul,
14 | ol,
15 | li,
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6,
22 | pre,
23 | code,
24 | form,
25 | fieldset,
26 | legend,
27 | input,
28 | textarea,
29 | p,
30 | blockquote,
31 | th,
32 | td {
33 | 	margin: 0;
34 | 	padding: 0;
35 | }
36 | table {
37 | 	border-collapse: collapse;
38 | 	border-spacing: 0;
39 | }
40 | fieldset,
41 | img {
42 | 	border: 0;
43 | }
44 | address,
45 | caption,
46 | cite,
47 | code,
48 | dfn,
49 | em,
50 | strong,
51 | th,
52 | var {
53 | 	font-style: normal;
54 | 	font-weight: normal;
55 | }
56 | ol,
57 | ul {
58 | 	list-style: none;
59 | }
60 | caption,
61 | th {
62 | 	text-align: left;
63 | }
64 | h1,
65 | h2,
66 | h3,
67 | h4,
68 | h5,
69 | h6 {
70 | 	font-size: 100%;
71 | 	font-weight: normal;
72 | }
73 | q:before,
74 | q:after {
75 | 	content: '';
76 | }
77 | abbr,
78 | acronym {
79 | 	border: 0;
80 | 	font-variant: normal;/*设置小型大写字母的字体显示文本*/
81 | }
82 | sup {
83 | 	vertical-align: text-top;
84 | }
85 | sub {
86 | 	vertical-align: text-bottom;
87 | }
88 | input,
89 | textarea,
90 | select {
91 | 	font-family: inherit;
92 | 	font-size: inherit;
93 | 	font-weight: inherit;
94 | 	*font-size: 100%;
95 | }
96 | legend {
97 | 	color: #000;
98 | }
99 | 


--------------------------------------------------------------------------------
/good.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>商品详情页1：商品图片不带图片放大镜效果</title>
  6 |     <meta name="author" content="xiaoma"/>
  7 |     <meta name="description" content="imitateWeb"/>
  8 |     <meta name="keywords" content="good,detail"/>
  9 |     <meta name="copyright" content="xiaoma所有"/>
 10 |     <!--打开网页，顶部标签页右侧显示图标-->
 11 |     <link rel="Shortcut Icon" href="img/horse.ico">
 12 |     <!--引入外部样式表-->
 13 |     <link rel="stylesheet" href="css/resetcss.css"/>
 14 |     <link rel="stylesheet" href="css/main.css"/>
 15 | </head>
 16 | <body>
 17 | <div id="header">
 18 |     <ul id="leftlist" class="list">
 19 |         <li><a href="#" class="link">请登录</a></li>
 20 |         <li><a href="#" class="link">免费注册</a></li>
 21 |     </ul>
 22 |     <ul id="rightlist" class="list">
 23 |         <li class="haschild">
 24 |             <a href="#" class="link" title="myorders">我的订单
 25 |             </a>
 26 |             <ul class="showdetail">
 27 |                 <li><a href="#" class="item">全部订单</a></li>
 28 |                 <li><a href="#" class="item">待付款订单</a></li>
 29 |                 <li><a href="#" class="item">待收货订单</a></li>
 30 |                 <li><a href="#" class="item">待评价订单</a></li>
 31 |             </ul>
 32 |         </li>
 33 |         <li><a href="#" class="link">购物车</a></li>
 34 |         <li class="haschild"><a href="#" class="link">收藏夹
 35 |         </a>
 36 |             <ul class="showdetail">
 37 |                 <li><a href="#" class="item">收藏的商品</a></li>
 38 |                 <li><a href="#" class="item">收藏的店铺</a></li>
 39 |             </ul>
 40 |         </li>
 41 |         <li><a href="#" class="link">商品分类</a></li>
 42 |         <li class="haschild">
 43 |             <a href="#" class="link">网站导航
 44 |             </a>
 45 | 
 46 |             <div class="showdetail biglist">
 47 |                 <div class="listblock">
 48 |                     <h2 class="shoptitle">主题市场</h2>
 49 |                     <ul>
 50 |                         <li><a href="#" class="items">女装</a></li>
 51 |                         <li><a href="#" class="items">男装</a></li>
 52 |                         <li><a href="#" class="items">鞋靴</a></li>
 53 |                         <li><a href="#" class="items">箱包</a></li>
 54 |                         <li><a href="#" class="items">母婴</a></li>
 55 |                         <li><a href="#" class="items">美妆</a></li>
 56 |                         <li><a href="#" class="items">户外</a></li>
 57 |                         <li><a href="#" class="items">食品</a></li>
 58 |                         <li><a href="#" class="items">珠宝</a></li>
 59 |                     </ul>
 60 |                 </div>
 61 |                 <div class="listblock centerblock">
 62 |                     <h2 class="shoptitle">特色市场</h2>
 63 |                     <ul>
 64 |                         <li><a href="#" class="items">女装</a></li>
 65 |                         <li><a href="#" class="items">男装</a></li>
 66 |                         <li><a href="#" class="items">鞋靴</a></li>
 67 |                         <li><a href="#" class="items">箱包</a></li>
 68 |                         <li><a href="#" class="items">母婴</a></li>
 69 |                         <li><a href="#" class="items">美妆</a></li>
 70 |                         <li><a href="#" class="items">户外</a></li>
 71 |                         <li><a href="#" class="items">食品</a></li>
 72 |                         <li><a href="#" class="items">珠宝</a></li>
 73 |                     </ul>
 74 |                 </div>
 75 |                 <div class="listblock">
 76 |                     <h2 class="shoptitle">跳骚市场</h2>
 77 |                     <ul>
 78 |                         <li><a href="#" class="items">女装</a></li>
 79 |                         <li><a href="#" class="items">男装</a></li>
 80 |                         <li><a href="#" class="items">鞋靴</a></li>
 81 |                         <li><a href="#" class="items">箱包</a></li>
 82 |                         <li><a href="#" class="items">母婴</a></li>
 83 |                         <li><a href="#" class="items">美妆</a></li>
 84 |                         <li><a href="#" class="items">户外</a></li>
 85 |                         <li><a href="#" class="items">食品</a></li>
 86 |                         <li><a href="#" class="items">珠宝</a></li>
 87 |                     </ul>
 88 |                 </div>
 89 |             </div>
 90 |         </li>
 91 |     </ul>
 92 | </div>
 93 | <div id="content">
 94 |     <div id="shop">
 95 |         <!--店铺名称-->
 96 |         <a href="#">
 97 |             <div id="shopname">店铺：私房包袋</div>
 98 |         </a>
 99 |         <!--搜索框-->
100 |         <div id="search" class="query">
101 |             <input type="text" id="select" placeholder="请输入搜索文字..."/>
102 |             <button type="button" id="btnquery">搜索</button>
103 |         </div>
104 |     </div>
105 |     <div id="shopmenus">
106 |         <ul id="smenus">
107 |             <li class="hasmenu">
108 |                 <a href="#" class="smenu">所有分类</a>
109 |                 <ul class="catalogs">
110 |                     <li class="hasmenutwo"><a href="#" class="class">上衣</a>
111 |                         <ul class="twocatalog">
112 |                             <li><a href="#" class="class">针织衫</a>
113 |                             </li>
114 |                             <li><a href="#" class="class">毛呢大衣</a></li>
115 |                             <li><a href="#" class="class">羽绒服</a></li>
116 |                             <li><a href="#" class="class">棉衣</a></li>
117 |                             <li><a href="#" class="class">外套</a></li>
118 |                             <li><a href="#" class="class">T恤</a></li>
119 |                         </ul>
120 |                     </li>
121 |                     <li><a href="#" class="class">裙子</a></li>
122 |                     <li><a href="#" class="class">裤子</a></li>
123 |                     <li><a href="#" class="class">套装</a></li>
124 |                     <li><a href="#" class="class">鞋子</a></li>
125 |                     <li><a href="#" class="class">包包</a></li>
126 |                     <li><a href="#" class="class">配饰</a></li>
127 |                 </ul>
128 |             </li>
129 |             <li><a href="#" class="smenu">店铺首页</a></li>
130 |             <li><a href="#" class="smenu">新品上线</a></li>
131 |             <li><a href="#" class="smenu">活动专区</a></li>
132 |             <li><a href="#" class="smenu">搭配专区</a></li>
133 |             <li><a href="#" class="smenu">精品推荐</a></li>
134 |             <li><a href="#" class="smenu">过季商品</a></li>
135 |             <li><a href="#" class="smenu">品牌介绍</a></li>
136 |         </ul>
137 |     </div>
138 |     <div id="goodshow">
139 |         <div id="imags">
140 |              <div id="bigimgs">
141 |                  <ul>
142 |                      <li><img src="img/good1.jpg"/></li>
143 |                      <li><img src="img/good2.jpg"/></li>
144 |                      <li><img src="img/good3.jpg"/></li>
145 |                      <li><img src="img/good4.jpg"/></li>
146 |                      <li><img src="img/good5.jpg"/></li>
147 |                  </ul>
148 |              </div>
149 |              <div id="smallimgs">
150 |                  <ul>
151 |                      <li style="border-color: #cc6688"><img src="img/good1.jpg" data-count="0"/></li>
152 |                      <li><img src="img/good2.jpg" data-count="1"/></li>
153 |                      <li><img src="img/good3.jpg" data-count="2"/></li>
154 |                      <li><img src="img/good4.jpg" data-count="3"/></li>
155 |                      <li><img src="img/good5.jpg" data-count="4"/></li>
156 |                  </ul>
157 |              </div>
158 |         </div>
159 |         <div id="imgtxt">
160 |             <h2>新品上市 连帽中长款毛衣外套 韩版大衣女</h2>
161 | 
162 |             <div class="goodinfo">此款韩版毛衣外套，是轮廓大衣，时尚，大气，衬皮肤。棉线舒服温暖，你喜欢韩风妹子的不错选择哦！</div>
163 |             <div class="goodinfo">价格&nbsp;&nbsp;&nbsp;&nbsp;<span class="price">￥266</span></div>
164 |             <div class="goodinfo">配送&nbsp;&nbsp;&nbsp;&nbsp;<span class="price">包邮</span></div>
165 |             <div class="goodinfo" id="size">尺码&nbsp;&nbsp;&nbsp;&nbsp;
166 |                 <p class="block">S</p>
167 | 
168 |                 <p class="block">M</p>
169 | 
170 |                 <p class="block">L</p></div>
171 |             <div class="goodinfo" id="color">颜色&nbsp;&nbsp;&nbsp;&nbsp;<p class="block">粉色</p>
172 | 
173 |                 <p class="block">白色</p>
174 | 
175 |                 <p class="block">黑色</p></div>
176 |             <div class="goodinfo">数量&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" min="1" id="num" value="1"/></div>
177 |             <div class="goodinfo"><input type="button" value="立即购买" class="btngood" id="btnbuy"/>&nbsp;&nbsp;&nbsp;&nbsp;<input
178 |                     type="button" value="加入购物车" class="btngood" id="btnadd"/></div>
179 |         </div>
180 |         <div id="recommend">
181 |             <h2>热卖商品</h2>
182 | 
183 |             <div id="rgood">
184 |                 <ul>
185 |                     <li><a href="#" class="suggest"><img src="img/r1.jpg"></a>
186 | 
187 |                         <div class="showprice">￥128.6</div>
188 |                     </li>
189 |                     <li><a href="#" class="suggest"><img src="img/r2.jpg"></a>
190 | 
191 |                         <div class="showprice">￥238.6</div>
192 |                     </li>
193 |                     <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>
194 | 
195 |                         <div class="showprice">￥158.6</div>
196 |                     </li>
197 |                     <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>
198 | 
199 |                         <div class="showprice">￥268.6</div>
200 |                     </li>
201 |                     <li><a href="#" class="suggest"><img src="img/r1.jpg"></a>
202 | 
203 |                         <div class="showprice">￥128.6</div>
204 |                     </li>
205 |                     <li><a href="#" class="suggest"><img src="img/r2.jpg"></a>
206 | 
207 |                         <div class="showprice">￥238.6</div>
208 |                     </li>
209 |                     <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>
210 | 
211 |                         <div class="showprice">￥158.6</div>
212 |                     </li>
213 |                     <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>
214 | 
215 |                         <div class="showprice">￥268.6</div>
216 |                     </li>
217 |                     <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>
218 | 
219 |                         <div class="showprice">￥158.6</div>
220 |                     </li>
221 |                     <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>
222 | 
223 |                         <div class="showprice">￥268.6</div>
224 |                     </li>
225 |                 </ul>
226 |             </div>
227 |             <div id="arrow">
228 |                 <p id="arrtop"></p>
229 | 
230 |                 <p id="arrbot"></p>
231 |             </div>
232 |         </div>
233 |     </div>
234 |     <div id="gooddetail">
235 | 
236 |     </div>
237 | </div>
238 | <div id="footer">
239 |     All Rights Reserved. xiaomaer 版权所有
240 | </div>
241 | <!--显示高清大图-->
242 | <div id="showbigimg"><img src="img/good1.jpg" id="bigimg"></div>
243 | <script src="js/good.js"></script>
244 | </body>
245 | </html>


--------------------------------------------------------------------------------
/goodDetail.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>商品详情页2：商品图片带有放大镜效果</title>
  6 |     <meta name="author" content="xiaoma"/>
  7 |     <meta name="description" content="imitateWeb"/>
  8 |     <meta name="keywords" content="good,detail"/>
  9 |     <meta name="copyright" content="xiaoma所有"/>
 10 |     <!--打开网页，顶部标签页右侧显示图标-->
 11 |     <link rel="Shortcut Icon" href="img/horse.ico">
 12 |     <!--引入外部样式表-->
 13 |     <link rel="stylesheet" href="css/resetcss.css"/>
 14 |     <link rel="stylesheet" href="css/main.css"/>
 15 | </head>
 16 | <body>
 17 | <div id="header">
 18 |     <ul id="leftlist" class="list">
 19 |         <li><a href="#" class="link">请登录</a></li>
 20 |         <li><a href="#" class="link">免费注册</a></li>
 21 |     </ul>
 22 |     <ul id="rightlist" class="list">
 23 |         <li class="haschild">
 24 |             <a href="#" class="link" title="myorders">我的订单
 25 |             </a>
 26 |             <ul class="showdetail">
 27 |                 <li><a href="#" class="item">全部订单</a></li>
 28 |                 <li><a href="#" class="item">待付款订单</a></li>
 29 |                 <li><a href="#" class="item">待收货订单</a></li>
 30 |                 <li><a href="#" class="item">待评价订单</a></li>
 31 |             </ul>
 32 |         </li>
 33 |         <li><a href="#" class="link">购物车</a></li>
 34 |         <li class="haschild"><a href="#" class="link">收藏夹
 35 |         </a>
 36 |             <ul class="showdetail">
 37 |                 <li><a href="#" class="item">收藏的商品</a></li>
 38 |                 <li><a href="#" class="item">收藏的店铺</a></li>
 39 |             </ul>
 40 |         </li>
 41 |         <li><a href="#" class="link">商品分类</a></li>
 42 |         <li class="haschild">
 43 |             <a href="#" class="link">网站导航
 44 |             </a>
 45 | 
 46 |             <div class="showdetail biglist">
 47 |                 <div class="listblock">
 48 |                     <h2 class="shoptitle">主题市场</h2>
 49 |                     <ul>
 50 |                         <li><a href="#" class="items">女装</a></li>
 51 |                         <li><a href="#" class="items">男装</a></li>
 52 |                         <li><a href="#" class="items">鞋靴</a></li>
 53 |                         <li><a href="#" class="items">箱包</a></li>
 54 |                         <li><a href="#" class="items">母婴</a></li>
 55 |                         <li><a href="#" class="items">美妆</a></li>
 56 |                         <li><a href="#" class="items">户外</a></li>
 57 |                         <li><a href="#" class="items">食品</a></li>
 58 |                         <li><a href="#" class="items">珠宝</a></li>
 59 |                     </ul>
 60 |                 </div>
 61 |                 <div class="listblock centerblock">
 62 |                     <h2 class="shoptitle">特色市场</h2>
 63 |                     <ul>
 64 |                         <li><a href="#" class="items">女装</a></li>
 65 |                         <li><a href="#" class="items">男装</a></li>
 66 |                         <li><a href="#" class="items">鞋靴</a></li>
 67 |                         <li><a href="#" class="items">箱包</a></li>
 68 |                         <li><a href="#" class="items">母婴</a></li>
 69 |                         <li><a href="#" class="items">美妆</a></li>
 70 |                         <li><a href="#" class="items">户外</a></li>
 71 |                         <li><a href="#" class="items">食品</a></li>
 72 |                         <li><a href="#" class="items">珠宝</a></li>
 73 |                     </ul>
 74 |                 </div>
 75 |                 <div class="listblock">
 76 |                     <h2 class="shoptitle">跳骚市场</h2>
 77 |                     <ul>
 78 |                         <li><a href="#" class="items">女装</a></li>
 79 |                         <li><a href="#" class="items">男装</a></li>
 80 |                         <li><a href="#" class="items">鞋靴</a></li>
 81 |                         <li><a href="#" class="items">箱包</a></li>
 82 |                         <li><a href="#" class="items">母婴</a></li>
 83 |                         <li><a href="#" class="items">美妆</a></li>
 84 |                         <li><a href="#" class="items">户外</a></li>
 85 |                         <li><a href="#" class="items">食品</a></li>
 86 |                         <li><a href="#" class="items">珠宝</a></li>
 87 |                     </ul>
 88 |                 </div>
 89 |             </div>
 90 |         </li>
 91 |     </ul>
 92 | </div>
 93 | <div id="content">
 94 |     <div id="shop">
 95 |         <!--店铺名称-->
 96 |         <a href="#">
 97 |             <div id="shopname">店铺：私房包袋</div>
 98 |         </a>
 99 |         <!--搜索框-->
100 |         <div id="search" class="query">
101 |             <input type="text" id="select" placeholder="请输入搜索文字..."/>
102 |             <button type="button" id="btnquery">搜索</button>
103 |         </div>
104 |     </div>
105 |     <div id="shopmenus">
106 |         <ul id="smenus">
107 |             <li class="hasmenu">
108 |                 <a href="#" class="smenu">所有分类</a>
109 |                 <ul class="catalogs">
110 |                     <li class="hasmenutwo"><a href="#" class="class">上衣</a>
111 |                         <ul class="twocatalog">
112 |                             <li><a href="#" class="class">针织衫</a>
113 |                             </li>
114 |                             <li><a href="#" class="class">毛呢大衣</a></li>
115 |                             <li><a href="#" class="class">羽绒服</a></li>
116 |                             <li><a href="#" class="class">棉衣</a></li>
117 |                             <li><a href="#" class="class">外套</a></li>
118 |                             <li><a href="#" class="class">T恤</a></li>
119 |                         </ul>
120 |                     </li>
121 |                     <li><a href="#" class="class">裙子</a></li>
122 |                     <li><a href="#" class="class">裤子</a></li>
123 |                     <li><a href="#" class="class">套装</a></li>
124 |                     <li><a href="#" class="class">鞋子</a></li>
125 |                     <li><a href="#" class="class">包包</a></li>
126 |                     <li><a href="#" class="class">配饰</a></li>
127 |                 </ul>
128 |             </li>
129 |             <li><a href="#" class="smenu">店铺首页</a></li>
130 |             <li><a href="#" class="smenu">新品上线</a></li>
131 |             <li><a href="#" class="smenu">活动专区</a></li>
132 |             <li><a href="#" class="smenu">搭配专区</a></li>
133 |             <li><a href="#" class="smenu">精品推荐</a></li>
134 |             <li><a href="#" class="smenu">过季商品</a></li>
135 |             <li><a href="#" class="smenu">品牌介绍</a></li>
136 |         </ul>
137 |     </div>
138 |     <div id="goodshow">
139 |         <div id="imags" style="overflow: visible">
140 |             <div class="imgbox">
141 |                 <!-- 商品大图 -->
142 |                 <a class="smallimg" href="#">
143 |                     <img id="smallimg" alt="加载中..." src="img/good1.jpg">
144 |                 </a>
145 |                 <!--商品细节大图-->
146 |                 <div class="bigbox">
147 |                     <img id="bimg" alt="加载中..." src="img/good1.jpg">
148 |                 </div>
149 |                 <!--大图上的显示区域遮罩层-->
150 |                 <div id="layer">
151 |                 </div>
152 |             </div>
153 |             <!--缩略图-->
154 |             <div class="imgsbox">
155 |                 <ul id="imgslist">
156 |                     <li class="imglist selected">
157 |                         <!-- 商品小图 -->
158 |                         <img class="simg" alt="加载中..." src="img/good1.jpg">
159 |                     </li>
160 |                     <li class="imglist">
161 |                         <!-- 商品小图 -->
162 |                         <img class="simg" alt="加载中..." src="img/good2.jpg">
163 |                     </li>
164 |                     <li class="imglist">
165 |                         <!-- 商品小图 -->
166 |                         <img class="simg" alt="加载中..." src="img/good3.jpg">
167 |                     </li>
168 |                     <li class="imglist">
169 |                         <!-- 商品小图 -->
170 |                         <img class="simg" alt="加载中..." src="img/good4.jpg">
171 |                     </li>
172 |                     <li class="imglist">
173 |                         <!-- 商品小图 -->
174 |                         <img class="simg" alt="加载中..." src="img/good5.jpg">
175 |                     </li>
176 |                 </ul>
177 |             </div>
178 |         </div>
179 |         <div id="imgtxt">
180 |             <h2>新品上市 连帽中长款毛衣外套 韩版大衣女</h2>
181 | 
182 |             <div class="goodinfo">此款韩版毛衣外套，是轮廓大衣，时尚，大气，衬皮肤。棉线舒服温暖，你喜欢韩风妹子的不错选择哦！</div>
183 |             <div class="goodinfo">价格&nbsp;&nbsp;&nbsp;&nbsp;<span class="price">￥266</span></div>
184 |             <div class="goodinfo">配送&nbsp;&nbsp;&nbsp;&nbsp;<span class="price">包邮</span></div>
185 |             <div class="goodinfo" id="size">尺码&nbsp;&nbsp;&nbsp;&nbsp;
186 |                 <p class="block">S</p>
187 | 
188 |                 <p class="block">M</p>
189 | 
190 |                 <p class="block">L</p></div>
191 |             <div class="goodinfo" id="color">颜色&nbsp;&nbsp;&nbsp;&nbsp;<p class="block">粉色</p>
192 | 
193 |                 <p class="block">白色</p>
194 | 
195 |                 <p class="block">黑色</p></div>
196 |             <div class="goodinfo">数量&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" min="1" id="num" value="1"/></div>
197 |             <div class="goodinfo"><input type="button" value="立即购买" class="btngood" id="btnbuy"/>&nbsp;&nbsp;&nbsp;&nbsp;<input
198 |                     type="button" value="加入购物车" class="btngood" id="btnadd"/></div>
199 |         </div>
200 |         <div id="recommend">
201 |             <h2>热卖商品</h2>
202 | 
203 |             <div id="rgood">
204 |                 <ul>
205 |                     <li><a href="#" class="suggest"><img src="img/r1.jpg"></a>
206 | 
207 |                         <div class="showprice">￥128.6</div>
208 |                     </li>
209 |                     <li><a href="#" class="suggest"><img src="img/r2.jpg"></a>
210 | 
211 |                         <div class="showprice">￥238.6</div>
212 |                     </li>
213 |                     <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>
214 | 
215 |                         <div class="showprice">￥158.6</div>
216 |                     </li>
217 |                     <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>
218 | 
219 |                         <div class="showprice">￥268.6</div>
220 |                     </li>
221 |                     <li><a href="#" class="suggest"><img src="img/r1.jpg"></a>
222 | 
223 |                         <div class="showprice">￥128.6</div>
224 |                     </li>
225 |                     <li><a href="#" class="suggest"><img src="img/r2.jpg"></a>
226 | 
227 |                         <div class="showprice">￥238.6</div>
228 |                     </li>
229 |                     <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>
230 | 
231 |                         <div class="showprice">￥158.6</div>
232 |                     </li>
233 |                     <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>
234 | 
235 |                         <div class="showprice">￥268.6</div>
236 |                     </li>
237 |                     <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>
238 | 
239 |                         <div class="showprice">￥158.6</div>
240 |                     </li>
241 |                     <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>
242 | 
243 |                         <div class="showprice">￥268.6</div>
244 |                     </li>
245 |                 </ul>
246 |             </div>
247 |             <div id="arrow">
248 |                 <p id="arrtop"></p>
249 | 
250 |                 <p id="arrbot"></p>
251 |             </div>
252 |         </div>
253 |     </div>
254 |     <div id="gooddetail">
255 | 
256 |     </div>
257 | </div>
258 | <div id="footer">
259 |     All Rights Reserved. xiaomaer 版权所有
260 | </div>
261 | <!--显示高清大图-->
262 | <div id="showbigimg"><img src="img/good1.jpg" id="bigimg"></div>
263 | <script src="js/publicgood.js"></script>
264 | <script src="js/jquery-2.1.4.js"></script>
265 | <script type="text/javascript" src="js/mejqzoom.js"></script>
266 | </body>
267 | </html>


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/1.jpg


--------------------------------------------------------------------------------
/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/1.png


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/2.jpg


--------------------------------------------------------------------------------
/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/2.png


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/3.jpg


--------------------------------------------------------------------------------
/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/3.png


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/4.jpg


--------------------------------------------------------------------------------
/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/4.png


--------------------------------------------------------------------------------
/img/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/5.png


--------------------------------------------------------------------------------
/img/arrb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/arrb.png


--------------------------------------------------------------------------------
/img/arrbot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/arrbot.png


--------------------------------------------------------------------------------
/img/arrt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/arrt.png


--------------------------------------------------------------------------------
/img/arrtop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/arrtop.png


--------------------------------------------------------------------------------
/img/bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/bag.png


--------------------------------------------------------------------------------
/img/good1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/good1.jpg


--------------------------------------------------------------------------------
/img/good2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/good2.jpg


--------------------------------------------------------------------------------
/img/good3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/good3.jpg


--------------------------------------------------------------------------------
/img/good4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/good4.jpg


--------------------------------------------------------------------------------
/img/good5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/good5.jpg


--------------------------------------------------------------------------------
/img/heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/heart.png


--------------------------------------------------------------------------------
/img/horse.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/horse.ico


--------------------------------------------------------------------------------
/img/mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/mask.png


--------------------------------------------------------------------------------
/img/r1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/r1.jpg


--------------------------------------------------------------------------------
/img/r2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/r2.jpg


--------------------------------------------------------------------------------
/img/r3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/r3.jpg


--------------------------------------------------------------------------------
/img/r4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaomaer/imitateWeb/74dc6047230503b49c6b061dfe7bffff9c07eda4/img/r4.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <!--编码-->
  6 |     <meta charset="utf-8"/>
  7 |     <title>小马模拟购物网站</title>
  8 |     <!--作者信息-->
  9 |     <meta name="author" content="xiaoma,http://y.dobit.top/"/>
 10 |     <!--网页描述-->
 11 |     <meta name="description" content="imitateWeb"/>
 12 |     <!--关键字-->
 13 |     <meta name="keywords" content="shopping,web"/>
 14 |     <meta name="copyright" content="xiaoma所有"/>
 15 | 
 16 |     <!--以下meta属性根据自己的需要选择使用-->
 17 |     <!--网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引-->
 18 |     <!--content的参数有all,none,index,noindex,follow,nofollow，默认是all-->
 19 |     <meta name="robots" content="no"/>
 20 |     <!--设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅-->
 21 |     <meta http-equiv="expires" content="Wed, 26 Feb 2027 08：21：57 GMT"/>
 22 |     <!--禁止浏览器从本地机的缓存中调阅页面内容-->
 23 |     <meta http-equiv="Pragma" content="no-cache"/>
 24 |     <!--用来防止别人在框架里调用你的页面-->
 25 |     <meta http-equiv="Window-target" content="_top"/>
 26 |     <!--页面重定向，5s后跳转到新的url:http://www.baidu.com/-->
 27 |     <!--<meta http-equiv="refresh" content="5;url=http://www.baidu.com/" />-->
 28 |     <!--网页不会被缓存-->
 29 |     <meta http-equiv="Cache-Control" content="no-cache,must-revalidate"/>
 30 |     <!--通知IE采用其所支持的最新的模式-->
 31 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 32 | 
 33 |     <!--打开网页，顶部标签页右侧显示图标-->
 34 |     <link rel="Shortcut Icon" href="img/horse.ico">
 35 |     <!--引入外部样式表-->
 36 |     <link rel="stylesheet" href="css/resetcss.css"/>
 37 |     <link rel="stylesheet" href="css/main.css"/>
 38 | </head>
 39 | 
 40 | <body>
 41 | <div id="header">
 42 |     <ul id="leftlist" class="list">
 43 |         <li><a href="#" class="link">请登录</a></li>
 44 |         <li><a href="#" class="link">免费注册</a></li>
 45 |     </ul>
 46 |     <ul id="rightlist" class="list">
 47 |         <li class="haschild">
 48 |             <a href="#" class="link" title="myorders">我的订单
 49 |             </a>
 50 |             <ul class="showdetail">
 51 |                 <li><a href="#" class="item">全部订单</a></li>
 52 |                 <li><a href="#" class="item">待付款订单</a></li>
 53 |                 <li><a href="#" class="item">待收货订单</a></li>
 54 |                 <li><a href="#" class="item">待评价订单</a></li>
 55 |             </ul>
 56 |         </li>
 57 |         <li><a href="#" class="link">购物车</a></li>
 58 |         <li class="haschild"><a href="#" class="link">收藏夹
 59 |         </a>
 60 |             <ul class="showdetail">
 61 |                 <li><a href="#" class="item">收藏的商品</a></li>
 62 |                 <li><a href="#" class="item">收藏的店铺</a></li>
 63 |             </ul>
 64 |         </li>
 65 |         <li><a href="#" class="link">商品分类</a></li>
 66 |         <li class="haschild">
 67 |             <a href="#" class="link">网站导航
 68 |             </a>
 69 | 
 70 |             <div class="showdetail biglist">
 71 |                 <div class="listblock">
 72 |                     <h2 class="shoptitle">主题市场</h2>
 73 |                     <ul>
 74 |                         <li><a href="#" class="items">女装</a></li>
 75 |                         <li><a href="#" class="items">男装</a></li>
 76 |                         <li><a href="#" class="items">鞋靴</a></li>
 77 |                         <li><a href="#" class="items">箱包</a></li>
 78 |                         <li><a href="#" class="items">母婴</a></li>
 79 |                         <li><a href="#" class="items">美妆</a></li>
 80 |                         <li><a href="#" class="items">户外</a></li>
 81 |                         <li><a href="#" class="items">食品</a></li>
 82 |                         <li><a href="#" class="items">珠宝</a></li>
 83 |                     </ul>
 84 |                 </div>
 85 |                 <div class="listblock centerblock">
 86 |                     <h2 class="shoptitle">特色市场</h2>
 87 |                     <ul>
 88 |                         <li><a href="#" class="items">女装</a></li>
 89 |                         <li><a href="#" class="items">男装</a></li>
 90 |                         <li><a href="#" class="items">鞋靴</a></li>
 91 |                         <li><a href="#" class="items">箱包</a></li>
 92 |                         <li><a href="#" class="items">母婴</a></li>
 93 |                         <li><a href="#" class="items">美妆</a></li>
 94 |                         <li><a href="#" class="items">户外</a></li>
 95 |                         <li><a href="#" class="items">食品</a></li>
 96 |                         <li><a href="#" class="items">珠宝</a></li>
 97 |                     </ul>
 98 |                 </div>
 99 |                 <div class="listblock">
100 |                     <h2 class="shoptitle">跳骚市场</h2>
101 |                     <ul>
102 |                         <li><a href="#" class="items">女装</a></li>
103 |                         <li><a href="#" class="items">男装</a></li>
104 |                         <li><a href="#" class="items">鞋靴</a></li>
105 |                         <li><a href="#" class="items">箱包</a></li>
106 |                         <li><a href="#" class="items">母婴</a></li>
107 |                         <li><a href="#" class="items">美妆</a></li>
108 |                         <li><a href="#" class="items">户外</a></li>
109 |                         <li><a href="#" class="items">食品</a></li>
110 |                         <li><a href="#" class="items">珠宝</a></li>
111 |                     </ul>
112 |                 </div>
113 |             </div>
114 |         </li>
115 |     </ul>
116 | </div>
117 | <div id="content">
118 |     <!--搜索框-->
119 |     <div id="search">
120 |         <input type="text" id="select" placeholder="请输入搜索文字..."/>
121 |         <button type="button" id="btnquery">搜索</button>
122 |     </div>
123 |     <!--左侧导航菜单-->
124 |     <div id="catalog">
125 |         <h2 id="goods">商品分类</h2>
126 | 
127 |         <div class="catalog">
128 |             <h3>推荐品牌</h3>
129 |             <ul>
130 |                 <li><a href="#" class="linkbrand">韩都衣舍</a></li>
131 |                 <li><a href="#" class="linkbrand">蘑菇小象</a></li>
132 |                 <li><a href="#" class="linkbrand">西西小可</a></li>
133 |                 <li><a href="#" class="linkbrand hotgood">衣品天城</a></li>
134 |                 <li><a href="#" class="linkbrand">pony</a></li>
135 |                 <li><a href="#" class="linkbrand">vans</a></li>
136 |                 <li><a href="#" class="linkbrand">七格格</a></li>
137 |                 <li><a href="#" class="linkbrand">zara</a></li>
138 |             </ul>
139 |             <h3>衣服</h3>
140 |             <ul>
141 |                 <li><a href="#" class="linkbrand">外套</a></li>
142 |                 <li><a href="#" class="linkbrand hotgood">毛衣</a></li>
143 |                 <li><a href="#" class="linkbrand">牛仔裤</a></li>
144 |                 <li><a href="#" class="linkbrand">打底裤</a></li>
145 |                 <li><a href="#" class="linkbrand">T恤</a></li>
146 |                 <li><a href="#" class="linkbrand">羽绒服</a></li>
147 |                 <li><a href="#" class="linkbrand">衬衫</a></li>
148 |                 <li><a href="#" class="linkbrand">内衣</a></li>
149 |             </ul>
150 |             <h3>箱包</h3>
151 |             <ul>
152 |                 <li><a href="#" class="linkbrand">行李箱</a></li>
153 |                 <li><a href="#" class="linkbrand">单肩包</a></li>
154 |                 <li><a href="#" class="linkbrand">双肩包</a></li>
155 |                 <li><a href="#" class="linkbrand">钱包</a></li>
156 |                 <li><a href="#" class="linkbrand">手提包</a></li>
157 |                 <li><a href="#" class="linkbrand">男包</a></li>
158 |                 <li><a href="#" class="linkbrand hotgood">女包</a></li>
159 |                 <li><a href="#" class="linkbrand">斜挎包</a></li>
160 |             </ul>
161 |             <h3>美食</h3>
162 |             <ul>
163 |                 <li><a href="#" class="linkbrand">干果</a></li>
164 |                 <li><a href="#" class="linkbrand">进口食品</a></li>
165 |                 <li><a href="#" class="linkbrand">牛奶</a></li>
166 |                 <li><a href="#" class="linkbrand">巧克力</a></li>
167 |                 <li><a href="#" class="linkbrand">王老五</a></li>
168 |                 <li><a href="#" class="linkbrand">面包</a></li>
169 |                 <li><a href="#" class="linkbrand hotgood">火腿肠</a></li>
170 |                 <li><a href="#" class="linkbrand">cookies</a></li>
171 |             </ul>
172 |         </div>
173 |     </div>
174 |     <div id="menus">
175 |         <ul>
176 |             <li><a href="#" class="menu">服装馆</a></li>
177 |             <li><a href="#" class="menu">科技馆</a></li>
178 |             <li><a href="#" class="menu">美妆馆</a></li>
179 |             <li><a href="#" class="menu">超市</a></li>
180 |             <li><a href="#" class="menu">本地购</a></li>
181 |         </ul>
182 |     </div>
183 |     <div id="turnimg">
184 |         <ul id="imgs">
185 |             <li><a href="#"><img src="img/1.jpg"/></a></li>
186 |             <li><a href="#"><img src="img/2.jpg"/></a></li>
187 |             <li><a href="#"><img src="img/3.jpg"/></a></li>
188 |             <li><a href="#"><img src="img/4.jpg"/></a></li>
189 |         </ul>
190 |         <ul id="circles">
191 |             <li class="currimg" data-num="0"></li>
192 |             <li class="circle" data-num="1"></li>
193 |             <li class="circle" data-num="2"></li>
194 |             <li class="circle" data-num="3"></li>
195 |         </ul>
196 |         <div class="arr left" id="arrL">
197 |             <div id="leftarr"></div>
198 |         </div>
199 |         <div class="arr right" id="arrR">
200 |             <div id="rightarr"></div>
201 |         </div>
202 |     </div>
203 |     <div id="notice">
204 |         <div id="status">
205 |             <h1>最新动态<a href="#" id="more">查看更多</a></h1>
206 |             <ul>
207 |                 <li><a href="#" class="notice"><span>[活动1]&nbsp;&nbsp;</span>双11，0元大抢购</a></li>
208 |                 <li><a href="#" class="notice"><span>[活动2]&nbsp;&nbsp;</span>双12，商品预购中</a></li>
209 |                 <li><a href="#" class="notice"><span>[活动3]&nbsp;&nbsp;</span>新鲜水果本地送，免邮费</a></li>
210 |                 <li><a href="#" class="notice"><span>[活动4]&nbsp;&nbsp;</span>电器以旧换新</a></li>
211 |                 <li><a href="#" class="notice"><span>[活动5]&nbsp;&nbsp;</span>品牌联合满减购</a></li>
212 |             </ul>
213 |         </div>
214 |         <div id="tabs">
215 |             <ul>
216 |                 <li><a href="#" class="tab border activelink">话费</a>
217 | 
218 |                     <div class="tabctn active">
219 |                         <p><label for="tel">号码：</label><input type="text" id="tel"/></p>
220 | 
221 |                         <p><label for="money">面值：</label><select id="money">
222 |                             <option>100元</option>
223 |                             <option>50元</option>
224 |                             <option>30元</option>
225 |                             <option>20元</option>
226 |                             <option>10元</option>
227 |                         </select></p>
228 |                         <p>
229 |                             <button type="button">充值</button>
230 |                         </p>
231 |                     </div>
232 |                 </li>
233 |                 <li><a href="#" class="tab border">机票</a>
234 | 
235 |                     <div class="tabctn">
236 |                         <p><label for="start">出发：</label><input type="text" id="start"/></p>
237 | 
238 |                         <p><label for="end">达到：</label><input type="text" id="end"/></p>
239 | 
240 |                         <p><label for="date">日期：</label><input type="datetime-local" id="date"/></p>
241 | 
242 |                         <p>
243 |                             <button type="button">查找</button>
244 |                         </p>
245 |                     </div>
246 |                 </li>
247 |                 <li><a href="#" class="tab border">电影</a>
248 | 
249 |                     <div class="tabctn">
250 |                         <p><label for="film">电影名称：</label><input type="text" id="film"/></p>
251 | 
252 |                         <p><label for="fdate">日期：</label><input type="date" id="fdate"/></p>
253 | 
254 |                         <p><label for="ftime">时间：</label><input type="time" id="ftime"/></p>
255 | 
256 |                         <p>
257 |                             <button type="button">购买</button>
258 |                         </p>
259 |                     </div>
260 |                 </li>
261 |                 <li><a href="#" class="tab">旅游</a>
262 | 
263 |                     <div class="tabctn">
264 |                         <p><label for="tourist ">景点名称：</label><input type="text" id="tourist "/></p>
265 | 
266 |                         <p><label for="traveldate">日期：</label><input type="date" id="traveldate"/></p>
267 |                         <button type="button">购买</button>
268 |                         </p>
269 |                     </div>
270 |                 </li>
271 |             </ul>
272 |         </div>
273 |     </div>
274 |     <div id="showgoods">
275 |         <ul>
276 |             <li><a href="good.html" target="_blank"><img src="img/1.png"></a></li>
277 |             <li><a href="goodDetail.html" target="_blank"><img src="img/2.png"></a></li>
278 |             <li><a href="good.html" target="_blank"><img src="img/3.png"></a></li>
279 |             <li><a href="goodDetail.html" target="_blank"><img src="img/4.png"></a></li>
280 |             <li><a href="good.html" target="_blank"><img src="img/5.png"></a></li>
281 |             <li><a href="goodDetail.html" target="_blank"><img src="img/1.png"></a></li>
282 |             <li><a href="good.html" target="_blank"><img src="img/2.png"></a></li>
283 |             <li><a href="goodDetail.html" target="_blank"><img src="img/3.png"></a></li>
284 |             <li><a href="good.html" target="_blank"><img src="img/4.png"></a></li>
285 |             <li><a href="goodDetail.html" target="_blank"><img src="img/5.png"></a></li>
286 |             <li><a href="good.html" target="_blank"><img src="img/1.png"></a></li>
287 |             <li><a href="goodDetail.html" target="_blank"><img src="img/2.png"></a></li>
288 |             <li><a href="good.html" target="_blank"><img src="img/3.png"></a></li>
289 |             <li><a href="goodDetail.html" target="_blank"><img src="img/4.png"></a></li>
290 |             <li><a href="good.html" target="_blank"><img src="img/5.png"></a></li>
291 |             <li><a href="goodDetail.html" target="_blank"><img src="img/1.png"></a></li>
292 |             <li><a href="good.html" target="_blank"><img src="img/2.png"></a></li>
293 |             <li><a href="goodDetail.html" target="_blank"><img src="img/3.png"></a></li>
294 |             <li><a href="good.html" target="_blank"><img src="img/4.png"></a></li>
295 |             <li><a href="goodDetail.html" target="_blank"><img src="img/5.png"></a></li>
296 |         </ul>
297 |     </div>
298 | </div>
299 | <div id="footer">
300 |     All Rights Reserved. xiaomaer 版权所有
301 | </div>
302 | <script src="js/home.js"></script>
303 | </body>
304 | 
305 | </html>


--------------------------------------------------------------------------------
/js/good.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by MMY on 2015/11/25.
  3 |  */
  4 | var doc = document;
  5 | //商品图片显示
  6 | var goods = function () {
  7 |     var showimg = doc.getElementById("showbigimg"),
  8 |         bigimg = doc.getElementById("bigimg"),
  9 |         isState = true,//记录鼠标是否在大图上(注意变量不要和函数名重名)
 10 |         bigimgs = doc.getElementById("bigimgs"),
 11 |         imgdiv = bigimgs.getElementsByTagName("ul")[0],
 12 |         imgwidth = bigimgs.getElementsByTagName("img")[0].offsetWidth,
 13 |         smallimgs = doc.getElementById("smallimgs"),
 14 |         smallLis = smallimgs.getElementsByTagName("li"),
 15 |         len = smallLis.length;
 16 |     //阻止事件冒泡
 17 |     function stopBubble(e) {
 18 |         //一般用在鼠标或键盘事件上
 19 |         if (e && e.stopPropagation) {
 20 |             //W3C取消冒泡事件
 21 |             e.stopPropagation();
 22 |         } else {
 23 |             //IE取消冒泡事件
 24 |             e.cancelBubble = true;
 25 |         }
 26 |     }
 27 | 
 28 |     //点击大图显示高清图
 29 |     function shoubigimg(event) {
 30 |         var e = event || window.event,
 31 |             target = e.target || e.srcElement;
 32 |         if (target.tagName.toLowerCase() === "img") {
 33 |             //显示大图片
 34 |             bigimg.src = target.src;
 35 |             showimg.style.display = "block";
 36 |             stopBubble(e);
 37 |         }
 38 |     }
 39 | 
 40 |     //点击高清图外的区域隐藏图片
 41 |     function hiddenimg() {
 42 |         if (showimg.style.display != "none" && isState) {
 43 |             showimg.style.display = "none";
 44 |         }
 45 |     }
 46 | 
 47 |     //鼠标在高清图上时，isState=false;鼠标在高清图外时，isState=true
 48 |     function isout(event) {
 49 |         var e = event || window.event,
 50 |             type = e.type;
 51 |         switch (type) {
 52 |             case "mouseover":
 53 |                 isState = false;
 54 |                 break;
 55 |             case "mouseout":
 56 |                 isState = true;
 57 |         }
 58 |     }
 59 | 
 60 |     //小图切换大图
 61 |     function smallToBig(event) {
 62 |         var e = event || window.event,
 63 |             target = e.target || e.srcElement,
 64 |             tagName = target.tagName.toLowerCase(),
 65 |             count = parseInt(target.getAttribute("data-count"));
 66 |         currleft = imgwidth * (-count);
 67 |         if (tagName === "img") {
 68 |             imgdiv.style.left = currleft + "px";
 69 |             for (var i = 0; i < len; i++) {
 70 |                 if (i === count) {
 71 |                     smallLis[i].style.borderColor = "#cc6688";
 72 |                 }
 73 |                 else {
 74 |                     smallLis[i].style.borderColor = "transparent";
 75 |                 }
 76 |             }
 77 |         }
 78 | 
 79 |     }
 80 | 
 81 |     return {
 82 |         showimg: shoubigimg,
 83 |         hiddenimg: hiddenimg,
 84 |         isout: isout,
 85 |         smallToBig: smallToBig
 86 |     }
 87 | }();
 88 | //选择尺寸
 89 | function selectSize(event) {
 90 |     var e = event || window.event,
 91 |         target = e.target || e.srcElement,
 92 |         pelem = doc.getElementById("size");
 93 |     selectSizeorColor(pelem, target);
 94 | }
 95 | //选择颜色
 96 | function selectColor(event) {
 97 |     var e = event || window.event,
 98 |         target = e.target || e.srcElement,
 99 |         pelem = doc.getElementById("color");
100 |     selectSizeorColor(pelem, target);
101 | }
102 | //选择尺寸或颜色
103 | function selectSizeorColor(pelem, elem) {
104 |     var ps = pelem.getElementsByTagName("p");
105 |     len = ps.length;
106 |     for (var i = 0; i < len; i++) {
107 |         ps[i].className = "block";
108 |     }
109 |     elem.className += " blockactive";
110 | }
111 | var check = function () {
112 |     var detail = doc.getElementById("imgtxt"),
113 |         goodname = detail.getElementsByTagName("h2")[0].innerHTML,
114 |         goodprice = detail.getElementsByClassName("price")[0].innerHTML,
115 |         goodsize = doc.getElementById("size"),
116 |         goodcolor = doc.getElementById("color"),
117 |         selectsize, selectcolor,count;
118 |     //验证是否选择
119 |     function validateNull() {
120 |         var ssize = goodsize.getElementsByClassName("blockactive")[0],
121 |             scolor = goodcolor.getElementsByClassName("blockactive")[0];
122 |         if (ssize === undefined || scolor === undefined) {
123 |             alert("请选择尺码或颜色。");
124 |             return false;
125 |         }
126 |         else {
127 |             selectsize = ssize.innerHTML;
128 |             selectcolor = scolor.innerHTML;
129 |             count = doc.getElementById("num").value;
130 |             return true;
131 |         }
132 | 
133 |     }
134 | 
135 |     //立即购买
136 |     function buygood() {
137 |         var isselect = validateNull();
138 |         if (isselect) {
139 |             var str = "您购买了如下商品：\n商品名称：" + goodname + "\n商品价格：" + goodprice + "\n商品尺码：" + selectsize + "\n商品颜色：" + selectcolor + "\n商品数量：" + count;
140 |             alert(str);
141 |         }
142 |         else {
143 |             return false;
144 |         }
145 | 
146 |     }
147 | 
148 | //加入购物车
149 |     function addgood() {
150 |         var isselect = validateNull();
151 |         if (isselect) {
152 |             var str = "您加入购物车商品如下：\n商品名称：" + goodname + "\n商品价格：" + goodprice + "\n商品尺码：" + selectsize + "\n商品颜色：" + selectcolor + "\n商品数量：" + count;
153 |             alert(str);
154 |         }
155 |         else {
156 |             return false;
157 |         }
158 |     }
159 | 
160 |     return {
161 |         buy: buygood,
162 |         add: addgood
163 |     }
164 | }();
165 | //上下切换图片
166 | var turnimgs = function () {
167 |     var div = doc.getElementById("rgood"),
168 |         divheight = div.offsetHeight,
169 |         ul = div.getElementsByTagName("ul")[0],
170 |         lis = div.getElementsByTagName("li"),
171 |         len = lis.length,
172 |         varytop = 0,
173 |         page, totalheight;
174 |     if (len % 4 == 0) {
175 |         page = len / 4;
176 |     }
177 |     else {
178 |         page =Math.ceil(len/4);
179 |     }
180 |     totalheight = divheight * (page - 1) * (-1);
181 |     function nextimgs() {
182 |         if (varytop > totalheight) {
183 |             varytop -= divheight;
184 | 
185 |         }
186 |         else {
187 |             varytop = 0;
188 |         }
189 |         ul.style.top = varytop + "px";
190 |     }
191 | 
192 |     function previmgs() {
193 |         if (varytop < 0) {
194 |             varytop += divheight;
195 | 
196 |         }
197 |         else {
198 |             varytop = totalheight;
199 |         }
200 |         ul.style.top = varytop + "px";
201 |     }
202 | 
203 |     return {
204 |         prev: previmgs,
205 |         next: nextimgs
206 |     }
207 | 
208 | }();
209 | //点击大图显示高清图
210 | doc.getElementById("bigimgs").addEventListener("click", goods.showimg, false);
211 | //高清图消失
212 | doc.addEventListener("mousedown", goods.hiddenimg, false);
213 | //记录鼠标的状态，用于让大图消失的功能
214 | doc.getElementById("showbigimg").addEventListener("mouseover", goods.isout, false);
215 | doc.getElementById("showbigimg").addEventListener("mouseout", goods.isout, false);
216 | //点击小图显示大图
217 | doc.getElementById("smallimgs").addEventListener("mouseover", goods.smallToBig, false);
218 | //选择尺码
219 | doc.getElementById("size").addEventListener("click", selectSize, false);
220 | //选择颜色
221 | doc.getElementById("color").addEventListener("click", selectColor, false);
222 | //立即购买
223 | doc.getElementById("btnbuy").addEventListener("click", check.buy, false);
224 | //加入购物车
225 | doc.getElementById("btnadd").addEventListener("click", check.add, false);
226 | //上箭头
227 | doc.getElementById("arrtop").addEventListener("click", turnimgs.prev, false);
228 | //下箭头
229 | doc.getElementById("arrbot").addEventListener("click", turnimgs.next, false);


--------------------------------------------------------------------------------
/js/home.js:
--------------------------------------------------------------------------------
  1 | var doc = document;
  2 | //中间轮播图，定时自动切换、点击箭头切换、点击圆点切换、鼠标悬浮时停止自动轮播和鼠标离开时开始自动轮播
  3 | var changimg = function () {
  4 |     var imglist = doc.getElementById("imgs"),
  5 |         imgs = imglist.getElementsByTagName("li"),
  6 |         circlelist = doc.getElementById("circles"),
  7 |         circles = circlelist.getElementsByTagName("li"),
  8 |         len = imgs.length,
  9 |         imgwidth = imgs[0].offsetWidth,
 10 |         totalwidth = imgwidth * (len - 1) * (-1),
 11 |         varywidth = imglist.offsetLeft,
 12 |         i = 0,
 13 |         timer;
 14 |     //下一张图片(不能实现无缝轮播，因为使用transition有过渡时间，不能瞬间切换图片)
 15 |     function nextimg() {
 16 |         if (varywidth > totalwidth) {
 17 |             varywidth -= imgwidth;
 18 |             circles[i].className = "circle";
 19 |             i++;
 20 |         }
 21 |         else {
 22 |             varywidth = 0;
 23 |             circles[len - 1].className = "circle";
 24 |             i = 0;
 25 |         }
 26 |         imglist.style.left = varywidth + "px";
 27 |         circles[i].className = "currimg";
 28 |     }
 29 | 
 30 |     //上一张图片
 31 |     function previmg() {
 32 |         if (varywidth < 0) {
 33 |             varywidth += imgwidth;
 34 |             circles[i].className = "circle";
 35 |             i--;
 36 |         }
 37 |         else {
 38 |             varywidth = totalwidth;
 39 |             circles[0].className = "circle";
 40 |             i = len - 1;
 41 |         }
 42 |         imglist.style.left = varywidth + "px";
 43 |         circles[i].className = "currimg";
 44 |     }
 45 | 
 46 |     //点击圆点切换图片
 47 |     function dotimg(event) {
 48 |         var e = event || window.event,
 49 |             target = e.target || e.srcElement,
 50 |             num;
 51 |         if(target.tagName.toLowerCase()==="li"){
 52 |             num = parseInt(target.getAttribute("data-num"));
 53 |             varywidth = imgwidth * num * (-1);
 54 |             imglist.style.left = varywidth + "px";
 55 |             for (var j = 0; j < len; j++) {
 56 |                 circles[j].className = "circle";
 57 |             }
 58 |             target.className = "currimg";
 59 |             i = num;
 60 |         }
 61 | 
 62 |     }
 63 | 
 64 |     //开启自动切换
 65 |     function startAutochange() {
 66 |         timer = setInterval(nextimg, 3000);
 67 |     }
 68 | 
 69 |     //停止自动切换
 70 |     function stopAutochange() {
 71 |         clearInterval(timer);
 72 |     }
 73 | 
 74 |     return {
 75 |         nextimg: nextimg,
 76 |         previmg: previmg,
 77 |         dotclick: dotimg,
 78 |         startauto: startAutochange,
 79 |         stopauto: stopAutochange
 80 |     }
 81 | }();
 82 | //右侧切换选项卡显示不同的内容
 83 | var tabs = function () {
 84 |     var tabs = doc.getElementsByClassName("tab"),
 85 |         tabctns = doc.getElementsByClassName("tabctn"),
 86 |         len = tabs.length;
 87 | //切换选项卡显示不同的内容
 88 |     function tabschange(event) {
 89 |         var e = event || window.event,
 90 |             target = e.target || e.srcElement;
 91 |         if (target.tagName.toLowerCase() === "a") {
 92 |             for (var i = 0; i < len; i++) {
 93 |                 if(i===len-1){
 94 |                     tabs[i].className = "tab";
 95 |                 }
 96 |                 else{
 97 |                     tabs[i].className = "tab border";
 98 |                 }
 99 |                 tabctns[i].className = "tabctn";
100 |             }
101 |             target.className += " activelink";
102 |             target.nextElementSibling.className += " active";
103 |         }
104 | 
105 |     }
106 | 
107 |     return {
108 |         tabchange: tabschange
109 |     }
110 | }();
111 | //底部自动轮播图，鼠标悬浮和离开时分别停止和启动自动轮播，点击小图显示大图。
112 | var bottomimg = function () {
113 |     var elem = doc.getElementById("showgoods"),
114 |         goodlist = elem.getElementsByTagName("ul")[0],
115 |         goods = elem.getElementsByTagName("li"),
116 |         len = goods.length,
117 |         imgwidth = goods[0].offsetWidth,
118 |         totalwidth = imgwidth * (len - 7) * (-1),
119 |         speed = 2,
120 |         currleft = 0,
121 |         timer,
122 |         bigimg = doc.getElementById("bigimg");
123 |     function bottomimg() {
124 |         if (currleft < totalwidth) {
125 |             currleft = 0;
126 |         }
127 |         currleft -= speed;
128 |         goodlist.style.left = currleft + "px";
129 |     }
130 | 
131 |     //开启自动切换
132 |     function startAutochange() {
133 |         timer = setInterval(bottomimg, 30);
134 |     }
135 | 
136 |     //停止自动切换
137 |     function stopAutochange() {
138 |         clearInterval(timer);
139 |     }
140 |     return {
141 |         turnimg: bottomimg,
142 |         startauto: startAutochange,
143 |         stopauto: stopAutochange,
144 |     }
145 | }();
146 | //搜索框表单验证
147 | function validateForm() {
148 |     var search = doc.getElementById("select").value;
149 |     if (search === "" || search === null) {
150 |         alert("请输入搜索文字！");
151 |         return false;
152 |     }
153 |     else {
154 |         alert("进行查询！");
155 |     }
156 | }
157 | window.onload = function () {
158 |     //启动定时轮播图片
159 |     changimg.startauto();
160 |     bottomimg.startauto();
161 | };
162 | //点击右箭头切换到下一张图片
163 | doc.getElementById("arrR").addEventListener("click", changimg.nextimg, false);
164 | //点击左箭头切换到上一张图片
165 | doc.getElementById("arrL").addEventListener("click", changimg.previmg, false);
166 | //点击圆点切换对应图片
167 | doc.getElementById("circles").addEventListener("click", changimg.dotclick, false);
168 | //鼠标悬浮图片上时停止自动轮播
169 | doc.getElementById("turnimg").addEventListener("mouseover", changimg.stopauto, false);
170 | //鼠标离开图片时自动轮播
171 | doc.getElementById("turnimg").addEventListener("mouseout", changimg.startauto, false);
172 | //鼠标悬浮列表项上时切换至对应选项卡
173 | doc.getElementById("tabs").addEventListener("mouseover", tabs.tabchange, false);
174 | //鼠标悬浮图片上时停止自动轮播
175 | doc.getElementById("showgoods").addEventListener("mouseover", bottomimg.stopauto, false);
176 | //鼠标离开图片时自动轮播
177 | doc.getElementById("showgoods").addEventListener("mouseout", bottomimg.startauto, false);
178 | //验证搜索框内容是否为空
179 | doc.getElementById("btnquery").addEventListener("click", validateForm, false);
180 | 


--------------------------------------------------------------------------------
/js/mejqzoom.js:
--------------------------------------------------------------------------------
  1 | $(function() {
  2 | 	var isState=false;
  3 | 	//鼠标在图片上移动时，显示遮罩层区域的细节图
  4 | 	$(".imgbox").mousemove(function(event) {
  5 | 		var imgstate=$("#showbigimg").css("display");
  6 | 		if(imgstate==="none"){//如果高清图没有显示就执行细节图显示，否则不执行任何操作
  7 | 			$(".bigbox").show();
  8 | 			//计算百分比
  9 | 			var sx = event.pageX, //鼠标在页面上的位置
 10 | 					sy = event.pageY,
 11 | 					ox = $(this).offset().left, //小图在页面上的偏移量
 12 | 					oy = $(this).offset().top,
 13 | 					cWidth = sx - ox, //鼠标在小图上的宽高
 14 | 					cHeight = sy - oy,
 15 | 					simgwidth = $("#smallimg").width(), //小图片的宽高
 16 | 					simgheight = $("#smallimg").height(),
 17 | 			//大图片的宽高
 18 | 					bimgwidth = $("#bimg").width(),
 19 | 					bimgheight = $("#bimg").height(),
 20 | 			//大图片显示区域的大小的一半
 21 | 					boxwidth = $(".bigbox").width() / 2,
 22 | 					boxheight = $(".bigbox").height() / 2,
 23 | 			////得出鼠标位置占图片大小的百分比
 24 | 					x = (cWidth / simgwidth).toFixed(2),
 25 | 					y = (cHeight / simgheight).toFixed(2),
 26 | 			//细节大图全部显示时临界百分比，即细节大图在显示区域的上下左右的距离不能小于大图显示区域宽或高的一半
 27 | 			//鼠标在小图左侧移动时，全部显示细节大图时的最小宽占比
 28 | 					minpercx = ((boxwidth + 2) / bimgwidth).toFixed(2), //+2,是边框的大小
 29 | 			//鼠标在小图上侧移动时，全部显示细节大图时的最小高占比
 30 | 					minpercy = ((boxheight + 2) / bimgheight).toFixed(2),
 31 | 			//鼠标在小图右侧移动时，全部显示细节大图时的最大宽占比
 32 | 					maxpercx = 1 - minpercx,
 33 | 			//鼠标在小图下侧移动时，全部显示细节大图时的最大高占比
 34 | 					maxpercy = 1 - minpercy,
 35 | 			//遮罩层的大小的一半
 36 | 					layerwidth = $("#layer").width() / 2,
 37 | 					layerheight = $("#layer").height() / 2,
 38 | 					bx, by; //保存大图显示中心位置坐标
 39 | 			//$("#preview-img").width() * x小于等于250
 40 | 			if (x <= minpercx) {
 41 | 				x = minpercx;
 42 | 			} else if (x >= maxpercx) { //$("#preview-img").width() * x大于等于（1280-250=1030）
 43 | 				x = maxpercx;
 44 | 			}
 45 | 			if (y <= minpercy) { //$("#preview-img").height() * y小于等于250
 46 | 				y = minpercy;
 47 | 			} else if (y >= maxpercy) { //$("#preview-img").height() * y大于等于（800-250=550）
 48 | 				y = maxpercy;
 49 | 			}
 50 | 			//鼠标在小图上的位置，距离上下左右不能小于遮罩层宽或高的一半
 51 | 			if (cWidth < layerwidth) {
 52 | 				cWidth = layerwidth;
 53 | 			} else if (cWidth > (simgwidth - layerwidth)) {
 54 | 				cWidth = simgwidth - layerwidth;
 55 | 			}
 56 | 			if (cHeight < layerheight) {
 57 | 				cHeight = layerheight;
 58 | 			} else if (cHeight > (simgheight - layerheight)) {
 59 | 				cHeight = simgheight - layerheight;
 60 | 			}
 61 | 			//遮罩层显示的位置
 62 | 			$("#layer").css('top', (cHeight - layerheight) + "px");
 63 | 			$("#layer").css('left', (cWidth - layerwidth) + "px");
 64 | 			$("#layer").css('visibility', "visible");
 65 | 			//计算细节大图正好显示在显示区域中心时的坐标
 66 | 			bx = -(bimgwidth * x - boxwidth);
 67 | 			by = -(bimgheight * y - boxheight);
 68 | 			$("#bimg").css('top', by + 'px');
 69 | 			$("#bimg").css('left', bx + 'px');
 70 | 		}
 71 | 	});
 72 | 	//鼠标移出图片区域，隐藏大图和遮罩层
 73 | 	$(".imgbox").mouseout(function() {
 74 | 		$("#layer").css('visibility', 'hidden');
 75 | 		$(".bigbox").hide();
 76 | 	});
 77 | 	//鼠标悬浮于缩略图之上时，在上方显示对应的图片
 78 | 	$(".imglist").mouseover(function() {
 79 | 		$(this).addClass("selected").siblings().removeClass("selected");
 80 | 		var srcValue = $(this).find(".simg").attr("src");
 81 | 		$("#smallimg").attr("src", srcValue.replace("small", "mid"));
 82 | 		$("#bimg").attr("src", srcValue.replace("_small", ""));
 83 | 	});
 84 | 	//点击大图显示高清图
 85 | 	$("#layer").click(function(event){
 86 |        var srcvalue=$("#smallimg").attr("src");
 87 | 		$("#showbigimg").attr("src",srcvalue);
 88 | 		$("#showbigimg").css("display","block");
 89 | 		event.stopPropagation();
 90 | 	});
 91 | 	//鼠标移出高清大图时，isState=true;
 92 | 	$("#showbigimg").mouseout(function(){
 93 | 		isState=true;
 94 | 	});
 95 | 	//鼠标在高清大图上时，isState=false;
 96 | 	$("#showbigimg").mouseover(function(){
 97 | 		isState=false;
 98 | 	});
 99 | 	//点击高清图之外的地方，关闭高清图
100 | 	$(document).click(function(){
101 | 		var showvalue=$("#smallimg").css("display");
102 | 		if(showvalue!= "none" && isState){
103 | 			$("#showbigimg").css("display","none");
104 | 		}
105 | 	});
106 | });


--------------------------------------------------------------------------------
/js/publicgood.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by MMY on 2015/12/2.
  3 |  */
  4 | var doc = document;
  5 | //选择尺寸
  6 | function selectSize(event) {
  7 |     var e = event || window.event,
  8 |         target = e.target || e.srcElement,
  9 |         pelem = doc.getElementById("size");
 10 |     selectSizeorColor(pelem, target);
 11 | }
 12 | //选择颜色
 13 | function selectColor(event) {
 14 |     var e = event || window.event,
 15 |         target = e.target || e.srcElement,
 16 |         pelem = doc.getElementById("color");
 17 |     selectSizeorColor(pelem, target);
 18 | }
 19 | //选择尺寸或颜色
 20 | function selectSizeorColor(pelem, elem) {
 21 |     var ps = pelem.getElementsByTagName("p");
 22 |     len = ps.length;
 23 |     for (var i = 0; i < len; i++) {
 24 |         ps[i].className = "block";
 25 |     }
 26 |     elem.className += " blockactive";
 27 | }
 28 | var check = function () {
 29 |     var detail = doc.getElementById("imgtxt"),
 30 |         goodname = detail.getElementsByTagName("h2")[0].innerHTML,
 31 |         goodprice = detail.getElementsByClassName("price")[0].innerHTML,
 32 |         goodsize = doc.getElementById("size"),
 33 |         goodcolor = doc.getElementById("color"),
 34 |         selectsize, selectcolor,count;
 35 |     //验证是否选择
 36 |     function validateNull() {
 37 |         var ssize = goodsize.getElementsByClassName("blockactive")[0],
 38 |             scolor = goodcolor.getElementsByClassName("blockactive")[0];
 39 |         if (ssize === undefined || scolor === undefined) {
 40 |             alert("请选择尺码或颜色。");
 41 |             return false;
 42 |         }
 43 |         else {
 44 |             selectsize = ssize.innerHTML;
 45 |             selectcolor = scolor.innerHTML;
 46 |             count = doc.getElementById("num").value;
 47 |             return true;
 48 |         }
 49 | 
 50 |     }
 51 | 
 52 |     //立即购买
 53 |     function buygood() {
 54 |         var isselect = validateNull();
 55 |         if (isselect) {
 56 |             var str = "您购买了如下商品：\n商品名称：" + goodname + "\n商品价格：" + goodprice + "\n商品尺码：" + selectsize + "\n商品颜色：" + selectcolor + "\n商品数量：" + count;
 57 |             alert(str);
 58 |         }
 59 |         else {
 60 |             return false;
 61 |         }
 62 | 
 63 |     }
 64 | 
 65 | //加入购物车
 66 |     function addgood() {
 67 |         var isselect = validateNull();
 68 |         if (isselect) {
 69 |             var str = "您加入购物车商品如下：\n商品名称：" + goodname + "\n商品价格：" + goodprice + "\n商品尺码：" + selectsize + "\n商品颜色：" + selectcolor + "\n商品数量：" + count;
 70 |             alert(str);
 71 |         }
 72 |         else {
 73 |             return false;
 74 |         }
 75 |     }
 76 | 
 77 |     return {
 78 |         buy: buygood,
 79 |         add: addgood
 80 |     }
 81 | }();
 82 | //上下切换图片
 83 | var turnimgs = function () {
 84 |     var div = doc.getElementById("rgood"),
 85 |         divheight = div.offsetHeight,
 86 |         ul = div.getElementsByTagName("ul")[0],
 87 |         lis = div.getElementsByTagName("li"),
 88 |         len = lis.length,
 89 |         varytop = 0,
 90 |         page, totalheight;
 91 |     if (len % 4 == 0) {
 92 |         page = len / 4;
 93 |     }
 94 |     else {
 95 |         page =Math.ceil(len/4);
 96 |     }
 97 |     totalheight = divheight * (page - 1) * (-1);
 98 |     function nextimgs() {
 99 |         if (varytop > totalheight) {
100 |             varytop -= divheight;
101 | 
102 |         }
103 |         else {
104 |             varytop = 0;
105 |         }
106 |         ul.style.top = varytop + "px";
107 |     }
108 | 
109 |     function previmgs() {
110 |         if (varytop < 0) {
111 |             varytop += divheight;
112 | 
113 |         }
114 |         else {
115 |             varytop = totalheight;
116 |         }
117 |         ul.style.top = varytop + "px";
118 |     }
119 | 
120 |     return {
121 |         prev: previmgs,
122 |         next: nextimgs
123 |     }
124 | 
125 | }();
126 | //选择尺码
127 | doc.getElementById("size").addEventListener("click", selectSize, false);
128 | //选择颜色
129 | doc.getElementById("color").addEventListener("click", selectColor, false);
130 | //立即购买
131 | doc.getElementById("btnbuy").addEventListener("click", check.buy, false);
132 | //加入购物车
133 | doc.getElementById("btnadd").addEventListener("click", check.add, false);
134 | //上箭头
135 | doc.getElementById("arrtop").addEventListener("click", turnimgs.prev, false);
136 | //下箭头
137 | doc.getElementById("arrbot").addEventListener("click", turnimgs.next, false);


--------------------------------------------------------------------------------