JS实现购物车特效

 

* {

 margin: 0;

 padding: 0;

}

a {

 color: #666;

 text-decoration: none;

}

body {

 padding: 20px;

 color: #666;

}

.fl{

 float: left;

}

.fr {

 float: right;

}

table {

 border-collapse: collapse;

 border-spacing: 0;

 border: 0;

 text-align: center;

 width: 937px;

}

th, td {

 border: 1px solid #CADEFF;

}

th {

 background: #e2f2ff;

 border-top: 3px solid #a7cbff;

 height: 30px;

}

td {

 padding: 10px;

 color: #444;

}

tbody tr:hover {

 background: RGB(238,246,255);

}

.checkbox {

 width: 60px;

}

.goods {

 width: 300px;

}

.goods span {

 width: 180px;

 margin-top: 20px;

 text-align: left;

 float: left;

}

.price {

 width: 130px;

}

.count {

 width: 90px;

}

.count .add, .count input, .count .reduce {

 float: left;

 margin-right: -1px;

 position: relative;

 z-index: 0;

}

.count .add, .count .reduce {

 height: 23px;

 width: 17px;

 border: 1px solid #e5e5e5;

 background: #f0f0f0;

 text-align: center;

 line-height: 23px;

 color: #444;

}

.count .add:hover, .count .reduce:hover {

 color: #f50;

 z-index: 3;

 border-color: #f60;

 cursor: pointer;

}

.count input {

 width: 50px;

 height: 15px;

 line-height: 15px;

 border: 1px solid #aaa;

 color: #343434;

 text-align: center;

 padding: 4px 0;

 background-color: #fff;

 z-index: 2;

}

.subtotal {

 width: 150px;

 color: red;

 font-weight: bold;

}

.operation {

 width: 80px;

}

.operation span:hover, a:hover {

 cursor: pointer;

 color: red;

 text-decoration: underline;

}

img {

 width: 100px;

 height: 80px;

 /*border: 1px solid #ccc;*/

 margin-right: 10px;

 float: left;

}

.foot {

 width: 935px;

 margin-top: 10px;

 color: #666;

 height: 48px;

 border: 1px solid #c8c8c8;

 background-color: #eaeaea;

 background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));

 position: relative;

 z-index: 8;

}

.foot div, .foot a {

 line-height: 48px;

 height: 48px;

}

.foot .select-all {

 width: 100px;

 height: 48px;

 line-height: 48px;

 padding-left: 5px;

 color: #666;

}

.foot .closing {

 border-left: 1px solid #c8c8c8;

 width: 100px;

 text-align: center;

 color: #000;

 font-weight: bold;

 background: RGB(238,238,238);

 cursor: pointer;

}

.foot .total{

 margin: 0 20px;

 cursor: pointer;

}

.foot #priceTotal, .foot #selectedTotal {

 color: red;

 font-family: "Microsoft Yahei";

 font-weight: bold;

}

.foot .selected {

 cursor: pointer;

}

.foot .selected .arrow {

 position: relative;

 top:-3px;

 margin-left: 3px;

}

.foot .selected .down {

 position: relative;

 top:3px;

 display: none;

}

 .show .selected .down {

 display: inline;

}

 .show .selected .up {

 display: none;

}

.foot .selected:hover .arrow {

 color: red;

}

.foot .selected-view {

 width: 935px;

 border: 1px solid #c8c8c8;

 position: absolute;

 height: auto;

 background: #ffffff;

 z-index: 9;

 bottom: 48px;

 left: -1px;

 display:none;

}

.show .selected-view {

 display: block;

}

.foot .selected-view div{

 height: auto;

}

.foot .selected-view .arrow {

 font-size: 16px;

 line-height: 100%;

 color:#c8c8c8;

 position: absolute;

 right: 330px;

 bottom: -9px;

}

.foot .selected-view .arrow span {

 color: #ffffff;

 position: absolute;

 left: 0px;

 bottom: 1px;

}

#selectedViewList {

 padding: 20px;

 margin-bottom: -20px;

}

#selectedViewList div{

 display: inline-block;

 position: relative;

 width: 100px;

 height: 80px;

 border: 1px solid #ccc;

 margin: 10px;

}

#selectedViewList div span {

 display: none;

 color: #ffffff;

 font-size: 12px;

 position: absolute;

 top: 0px;

 right: 0px;

 width: 60px;

 height: 18px;

 line-height: 18px;

 text-align: center;

 background: RGBA(0,0,0,.5);

 cursor: pointer;

}

#selectedViewList div:hover span {

 display: block;

}