html5动态切换class,HTML5 网格/列表展示模式动态切换

CSS

语言：

CSSSCSS

确定

body {

background: #5298fc;

text-align: center;

font-family: "Open Sans", sans-serif;

}

#view-code {

color: #fff;

opacity: 0.7;

font-size: 14px;

text-transform: uppercase;

font-weight: 700;

text-decoration: none;

position: absolute;

top: 700px;

left: 50%;

margin-left: -35px;

}

#view-code:hover {

opacity: 1;

}

#window {

margin: 30px auto 0;

border-radius: 6px;

background: #fff;

width: 675px;

height: 620px;

overflow: hidden;

position: relative;

}

#header {

background: #e3e5e9;

height: 33px;

padding-left: 18px;

}

#header .circle {

background: #9fa2a8;

border-radius: 50%;

float: left;

width: 12px;

height: 12px;

margin-right: 6px;

margin-top: 11px;

}

.thumbs {

padding: 10px 50px 30px 70px;

}

.thumbs p,

.thumbs p.floating-thumb {

background: #e3e5e9;

width: 155px;

height: 60px;

margin: 30px 30px 0 0;

border-radius: 4px;

float: left;

padding-top: 121px;

}

.floating-thumb {

background: #e3e5e9;

width: 155px;

height: 60px;

border-radius: 4px;

float: left;

padding-top: 121px;

position: absolute;

top: 156px;

left: 70px;

}

.floating-thumb.animate {

width: 303px;

height: 80px;

margin-top: 20px;

padding-top: 326px;

top: 146px;

left: 186px;

-webkit-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99);

-moz-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99);

-ms-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99);

-o-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99);

transition: all 400mscubic-bezier(0, 0.93, 0.33, 0.99);

}

.thumbs p span,

p.floating-thumb span {

display: block;

height: 10px;

margin: 10px 20px;

background: #d2d4d9;

border-radius: 2px;

}

.thumbs p span.short,

p.floating-thumb span.short {

width: 50px;

}

.thumbs p:hover {

background: #dfe0e5;

cursor: pointer;

-webkit-transition: all 100ms ease-out;

-moz-transition: all 100ms ease-out;

-ms-transition: all 100ms ease-out;

-o-transition: all 100ms ease-out;

transition: all 100ms ease-out;

}

#headline {

padding: 39px 50px 0px 70px;

}

#headline p {

width: 380px;

margin: 10px 0;

height: 15px;

background: #9fa2a8;

border-radius: 3px;

}

#headline p.short {

width: 220px;

}

#grid-selector {

width: 100px;

position: absolute;

top: 92px;

right: 79px;

}

#viewCarousel {

background: #e3e5e9;

width: 20px;

height: 20px;

float: right;

border-radius: 1px;

}

#viewCarousel:hover {

cursor: pointer;

}

#viewCarousel:hover,

#viewGrid:hover p {

cursor: pointer;

background: #cacdd1;

}

#viewCarousel.active,

#viewGrid.active p {

color: #5298fc;

}

#viewGrid {

width: 22px;

height: 20px;

float: right;

margin-top: -1px;

margin-right: 5px;

}

#viewGrid p {

background: #e3e5e9;

width: 9px;

height: 9px;

float: right;

border-radius: 1px;

margin: 1px;

}

#viewGrid.active p,

#viewCarousel.active {

background: #9fa2a8;

}

#carousel {

overflow: hidden;

position: relative;

height: 488px;

margin-top: 25px;

display: none;

position: absolute;

top: 121px;

left: 0;

width: 675px;

}

#carousel .innerCarousel {

position: absolute;

top: 0;

left: -168px;

}

#carousel .innerCarousel div {

width: 337px;

height: 448px;

text-align: center;

float: left;

}

#carousel .innerCarousel div p {

background: #e3e5e9;

width: 220px;

height: 73px;

margin: 30px auto 0 auto;

border-radius: 4px;

padding-top: 300px;

margin-top: 38px;

-webkit-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

-moz-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

-ms-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

-o-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

}

#carousel .innerCarousel div p:hover {

cursor: pointer;

}

#carousel .innerCarousel div p.current:hover {

cursor: normal;

}

#carousel .innerCarousel div p.current {

width: 303px;

height: 80px;

margin-top: 20px;

padding-top: 326px;

-webkit-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

-moz-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

-ms-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

-o-transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99);

}

#carousel .innerCarousel span,

p.floating-thumb.animate span {

height: 10px;

display: block;

margin: 10px 30px;

height: 12px;

background: #d2d4d9;

border-radius: 3px;

}

#carousel .innerCarousel span.short,

p.floating-thumb.animate span.short {

width: 170px;

}

.title {

position: absolute;

top: 152px;

left: 0;

width: 100%;

height: 60px;

overflow: hidden;

-webkit-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99) 120ms;

-moz-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99) 120ms;

-ms-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99) 120ms;

-o-transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99) 120ms;

transition: all 400ms cubic-bezier(0, 0.93, 0.33, 0.99) 120ms;

}