找回密码
当前位置：Mikel > 开发笔记 > 正文

[转载]响应式商品展示列表的实现 | TYStudio-专注WEB前端开发

2013-05-27 分类：开发笔记 / JavaScript 阅读(804) 评论(0)

转载响应式商品展示列表的实现 | TYStudio-专注WEB前端开发.

介绍一个最新的响应式商品展示列表，同时带有一些社会化和商品细节的显示。当点击旋转按钮的时候会显示商品的背面，使用Media queries实现响应式显示商品。当浏览器支持Flexbox的时候使用Flexbox。

响应式商品展示列表

查看演示  源码下载

很遗憾目前的版本还不支持IE系列浏览器。
HTML标签结构

<div id="cbp-pgcontainer" class="cbp-pgcontainer">
<ul class="cbp-pggrid">
	<li>
<div class="cbp-pgcontent"><span class="cbp-pgrotate" title="旋转">旋转</span>
<div class="cbp-pgitem">
<div class="cbp-pgitem-flip"><img src="images/1_front.png" alt="" />
<img src="images/1_back.png" alt="" /></div>
</div>
<!-- /cbp-pgitem -->
<ul class="cbp-pgoptions">
	<li class="cbp-pgoptcompare" title="比较">比较</li>
	<li class="cbp-pgoptfav" title="喜欢">喜欢</li>
	<li class="cbp-pgoptsize"><span title="XL号" data-size="XL">XL</span>
<div class="cbp-pgopttooltip"><span title="XL号" data-size="XL">XL</span>
<span title="L号" data-size="L">L</span>
<span title="M号" data-size="M">M</span>
<span title="S号" data-size="S">S</span></div></li>
	<li class="cbp-pgoptcolor"><span title="蓝色" data-color="c1">蓝色</span>
<div class="cbp-pgopttooltip"><span title="蓝色" data-color="c1">蓝色</span>
<span title="粉色" data-color="c2">粉色</span>
<span title="桔色" data-color="c3">桔色</span>
<span title="绿色" data-color="c4">绿色</span></div></li>
	<li class="cbp-pgoptcart" title="加入购物车"></li>
</ul>
<!-- cbp-pgoptions -->

</div>
<!-- cbp-pgcontent -->
<div class="cbp-pginfo">
<h3>T恤一</h3>
<span class="cbp-pgprice">￥29</span>

</div></li>
	<li><!-- ... --></li>
	<li><!-- ... --></li>
</ul>
</div>

CSS样式

@font-face {
font-family: 'pgicons';
src:url('../fonts/pgicons/pgicons.eot');
src:url('../fonts/pgicons/pgicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/pgicons/pgicons.woff') format('woff'),
url('../fonts/pgicons/pgicons.ttf') format('truetype'),
url('../fonts/pgicons/pgicons.svg#pgicons') format('svg');
font-weight: normal;
font-style: normal;
}

.cbp-pgcontainer {
position: relative;
width: 100%;
padding: 0 30px 100px 30px;
}

.cbp-pgcontainer ul,
.cbp-pgcontainer li {
padding: 0;
margin: 0;
list-style-type: none;
}

.cbp-pggrid {
position: relative;
text-align: center;
}
/* 如果支持flexbox，将使用flexbox来布局列表 */
.flexbox .cbp-pggrid {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
}

.cbp-pggrid &gt; li {
display: inline-block;
vertical-align: top;
position: relative;
width: 33%;
min-width: 340px;
max-width: 555px;
padding: 20px 2% 50px 2%;
text-align: left;
float:left;
}

.flexbox .cbp-pggrid &gt; li {
display: block;
}

.cbp-pgcontent {
border: 3px solid #47a3da;
position: relative;
}

.cbp-pgrotate {
width: 36px;
height: 36px;
position: absolute;
display: block;
color: transparent;
font-size: 0;
z-index: 100;
border-bottom: 3px solid #47a3da;
border-left: 3px solid #47a3da;
right: 0px;
top: 0px;
cursor: pointer;
text-align: center;
}

.cbp-pgrotate:before {
font-size: 18px;
line-height: 32px;
color: #47a3da;
}

.no-touch .cbp-pgrotate:hover,
.cbp-pgrotate.cbp-pgrotate-active {
background: #47a3da;
}

.no-touch .cbp-pgrotate:hover:before,
.cbp-pgrotate.cbp-pgrotate-active:before {
color: #fff;
}

/* The item with the images will have perspective */
.cbp-pgitem {
width: 100%;
position: relative;
padding: 2em;
-webkit-perspective: 1400px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

/* The flip container */
.cbp-pgitem-flip {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .4s ease-out;
-moz-transition: -moz-transform .4s ease-out;
transition: transform .4s ease-out;
}

/* 如果你想要实现当鼠标hover到图片的时候自动翻转的效果，你可以使用下面的代码:
.cbp-pgrotate:hover + .cbp-pgitem .cbp-pgitem-flip
*/
.cbp-pgitem.cbp-pgitem-showback .cbp-pgitem-flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform:rotate(180deg);
transform: rotateY(180deg);
}

.cbp-pgitem-flip img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

.cbp-pgitem img:first-child {
position: relative;
}

/* 为了显示背面，第二个图片将被旋转 */
.cbp-pgitem img:nth-child(2) {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
-moz-transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
-ms-transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
}

/* 浏览器不支持3dtransform的时候使用 */
.no-csstransforms3d .cbp-pgitem img:nth-child(2) {
position: relative;
top: 0;
left: 0;
display: none;
}

.no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:first-child {
display: none;
}

.no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:nth-child(2) {
display: block;
}

/* 商品详细信息样式 */
.cbp-pgoptions {
height: 60px;
width: 100%;
border-top: 3px solid #47a3da;
}

.cbp-pgoptions &gt; li {
width: 20%;
height: 100%;
float: left;
position: relative;
display: block;
cursor: pointer;
color: transparent;
font-size: 0;
border-left: 3px solid #47a3da;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.cbp-pgoptions &gt; li:first-child {
border-left: none;
}

.no-touch .cbp-pgoptions li {
color: #47a3da;
}

.no-touch .cbp-pgoptions li:hover,
.cbp-pgoptions li.cbp-pgoption-active {
background: #47a3da;
}

.cbp-pgoptions li:before,
.cbp-pgoptions li &gt; span {
font-size: 22px;
line-height: 60px;
text-indent: 0;
text-align: center;
color: #47a3da;
}

.no-touch .cbp-pgoptions li:hover:before,
.no-touch .cbp-pgoptions li:hover &gt; span,
.cbp-pgoptions li.cbp-pgoption-active &gt; span {
color: #fff;
}

.cbp-pgoptions li.cbp-pgoptsize &gt; span {
font-size: 22px;
}

.cbp-pgoptions li &gt; span {
display: block;
}

.cbp-pgoptions li:before {
position: absolute;
width: 100%;
height: 100%;
}

/* 图标 */
.cbp-pgoptcompare,
.cbp-pgoptcart,
.cbp-pgoptfav,
.cbp-pgrotate {
font-family: 'pgicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

.cbp-pgoptcompare:before {
content: "\e001";
}

.cbp-pgoptfav:before {
content: "\e003";
}

.cbp-pgoptfav.cbp-pgoptfav-selected:before {
content: "\e002";
color: #ee73b8;
}

.cbp-pgoptfav.cbp-pgoptfav-selected:hover:before {
color: #f9c0e0;
}

.cbp-pgoptcart:before {
content: "\e000";
}

.cbp-pgrotate:before {
content: "\e004";
}

/* 提示信息 */
.cbp-pgopttooltip {
position: absolute;
bottom: 180%;
margin-bottom: 0px;
background: #fff;
padding: 25px;
width: 100px;
left: 50%;
margin-left: -50px;
border: 3px solid #47a3da;
opacity: 0;
z-index: 1000;
visibility: hidden;
pointer-events: none;
-webkit-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s;
-moz-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s;
transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s;
}

.cbp-pgoptions li:hover .cbp-pgopttooltip,
.cbp-pgoptions li.cbp-pgoption-active .cbp-pgopttooltip {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
bottom: 100%;
pointer-events: auto;
}

.cbp-pgopttooltip:after,
.cbp-pgopttooltip:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.cbp-pgopttooltip:after {
border-color: transparent;
border-top-color: #fff;
border-width: 10px;
left: 50%;
margin-left: -10px;
}

.cbp-pgopttooltip:before {
border-color: transparent;
border-top-color: #47a3da;
border-width: 14px;
left: 50%;
margin-left: -14px;
}

/* 尺寸提示 */
.cbp-pgoptsize .cbp-pgopttooltip {
margin-left: -50px;
}

.cbp-pgoptsize .cbp-pgopttooltip span {
display: block;
text-indent: 0;
background: url(../images/tshirt.svg) no-repeat center center;
background-size: 100%;
margin: 0 auto 4px;
text-align: center;
font-size: 12px;
font-weight: 700;
color: #65b3e2;
}

.cbp-pgoptsize .cbp-pgopttooltip span:hover {
color: #0968a1;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform:scale(1.1);
-moz-transform: scale(1.1);
-ms-transform:scale(1.1);
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="XL"] {
width: 44px;
height: 44px;
line-height: 44px;
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="L"] {
width: 40px;
height: 40px;
line-height: 40px;
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="M"] {
width: 34px;
height: 34px;
line-height: 34px;
}

.cbp-pgoptsize .cbp-pgopttooltip span[data-size="S"] {
width: 30px;
height: 30px;
line-height: 30px;
}

/* 颜色提示 */
.cbp-pgoptcolor .cbp-pgopttooltip {
padding: 5px;
}

.cbp-pgoptions li.cbp-pgoptcolor &gt; span,
.cbp-pgoptcolor .cbp-pgopttooltip span {
display: block;
margin: 12px auto 0;
text-indent: -900em;
}

.cbp-pgoptions li.cbp-pgoptcolor &gt; span {
width: 36px;
height: 36px;
border: 3px solid #fff;
}

.cbp-pgoptcolor .cbp-pgopttooltip span {
float: left;
margin: 4px;
width: 34px;
height: 34px;
}

.no-touch .cbp-pgoptcolor .cbp-pgopttooltip span:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform:scale(1.1);
}

.cbp-pgoptcolor span[data-color="c1"] {
background: #72bbe9;
}

.cbp-pgoptcolor span[data-color="c2"] {
background: #e577aa;
}

.cbp-pgoptcolor span[data-color="c3"] {
background: #e5b178;
}

.cbp-pgoptcolor span[data-color="c4"] {
background: #7abe93;
}

.cbp-pginfo {
padding-top: 10px;
}

.cbp-pginfo:before,
.cbp-pginfo:after {
content: " ";
display: table;
}

.cbp-pginfo:after {
clear: both;
}

.cbp-pginfo h3,
.cbp-pginfo span {
float: left;
width: 50%;
font-size: 1.8em;
padding: 10px 5px;
margin: 0;
}

.cbp-pginfo h3 {
font-weight: 300;
}

.cbp-pginfo span {
font-weight: 700;
text-align: right;
}

/* Media Queries */

@media screen and (max-width: 68.125em) {
.cbp-pggrid &gt; li {
width: 48%;
}
}

@media screen and (max-width: 46.125em) {
.cbp-pggrid &gt; li {
width: 100%;
}
}

JavaScript

/**
* cbpShop.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( window ) {

'use strict';

function cbpShop( el ) {
this.el = el;
this._init();
}

cbpShop.prototype = {
_init : function() {
var self = this;

this.touch = Modernizr.touch;

this.products = this.el.querySelectorAll( 'ul.cbp-pggrid &gt; li' );
Array.prototype.slice.call( this.products ).forEach( function( el, i ) {
var content = el.querySelector( 'div.cbp-pgcontent' ),
item = content.querySelector( 'div.cbp-pgitem' ),
rotate = content.querySelector( 'span.cbp-pgrotate' );

if( self.touch ) {

rotate.addEventListener( 'touchstart', function() { self._rotateItem( this, item ); } );

var options = content.querySelector( 'ul.cbp-pgoptions' ),
size = options.querySelector( 'li.cbp-pgoptsize &gt; span' ),
color = options.querySelector( 'li.cbp-pgoptcolor &gt; span' );

size.addEventListener( 'touchstart', function() { self._showItemOptions( this ); } );
color.addEventListener( 'touchstart', function() { self._showItemOptions( this ); } );
}
else {
rotate.addEventListener( 'click', function() { self._rotateItem( this, item ); } );
}
} );
},
_rotateItem : function( trigger, item ) {
if( item.getAttribute( 'data-open' ) === 'open' ) {
item.setAttribute( 'data-open', '' );
trigger.className = trigger.className.replace(/\b cbp-pgrotate-active\b/,'');
item.className = item.className.replace(/\b cbp-pgitem-showback\b/,'');
}
else {
item.setAttribute( 'data-open', 'open' );
trigger.className += ' cbp-pgrotate-active';
item.className += ' cbp-pgitem-showback';
}
},
_showItemOptions : function( trigger ) {
if( trigger.getAttribute( 'data-open' ) === 'open' ) {
trigger.setAttribute( 'data-open', '' );
trigger.parentNode.className = trigger.parentNode.className.replace(/\b cbp-pgoption-active\b/,'');
}
else {
trigger.setAttribute( 'data-open', 'open' );
trigger.parentNode.className += ' cbp-pgoption-active';
}
},
/*
other functions..
*/
}

window.cbpShop = cbpShop;

} )( window );

英文原文链接：PRODUCT GRID LAYOUT

赞(0) 打赏
分享到： 更多 (0)
标签：

相关推荐

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表

<figure class="wp-block-image size-full"><a href="https://act.walk-live.com/acts/invite/registration?inviteid=hkXrmnvL" target="_blank"><img src="https://www.mikel.cn/wp-content/uploads/2024/11/wangxinyun.jpg"></a></figure>

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏