建缘首页
Portal
进入论坛
BBS
京东专区
JD
淘宝天猫
Taobao
设计交流
Design
QQ群
登录
/ 注册
用户名
Email
自动登录
找回密码
密码
登录
立即注册
只需一步,快速开始
搜索
搜索
热搜
电商设计
京东装修
天猫装修
淘宝装修
素材下载
运营交流
建缘设计
软件下载
本版
文章
帖子
用户
本版
文章
帖子
用户
发布
每日签到
运营交流
代码特效
基础教程
需求问答
运营交流
代码特效
基础教程
需求问答
作品欣赏
技术交流
素材下载
字体下载
软件下载
好友
帖子
收藏
道具
勋章
任务
淘帖
留言板
设置
我的收藏
退出
腾讯QQ
微信登录
进入论坛
›
京东专区
›
代码特效
›
查看内容
赞
0
建缘设计
管理员
42391
积分
1403
帖子
12
精华
【炫酷下拉导航】京东增强版下拉黑色炫酷导航,颜色可自己调整
【店招】带轮播搜索的白色简洁店招代码分享
【立体导航】京东测试有效,实现超有立体感的导航代码
锚点教程,实现页面内的跳转,淘宝天猫京东都适用
【搜索】京东自定义搜索框代码范例及获取自己家搜索地址的方法!
【导航】蓝色清爽下拉带图片轮播导航代码分享
【移动导航】京东导航特效—背景跟随鼠标移动,亲测有效
【侧滑】可以关闭的侧滑代码分享超有创意哦
【轮播】京东海尔旗舰店创意轮播代码分享
【轮播/菜单】1920全屏轮播悬浮二级分类菜单代码分享
【5月14日更新可用】京东店招显示超110px
2017-01-12
•
【全屏轮播】文字按钮全屏轮播特效代码分享
•
【侧滑】经典简洁侧滑悬浮商品轮播代码特效
•
【模板】【轮播】自适应轮播代码分享,含模
[商品展示]
【商品推荐】京东小米官方旗舰店简洁一排三图划过放大
©
建缘设计
管理员
/ 2018-9-25 10:27 /
2 人收藏
版权:
保留作者信息
代码风格:【商品推荐】京东小米官方旗舰店简洁一排三图划过放大
适用平台:京东
使用方法:自定义模块
代码预览
加群学习 >
一排三图的,一排2图的前几天更新了,稍后更新1排四图的
代码如下:
复制代码
<style>
.user-content {
width: 990px;
margin:0 auto;
margin-top: 20px;
}
.user-container{
width: 1003px;
}
.user-goods-item {
position: relative;
float: left;
width: 320px;
height: 350px;
padding-top: 47px;
margin-right: 14px;
margin-bottom: 14px;
text-align: center;
background: #fff;
overflow: hidden;
-webkit-transition: -webkit-box-shadow .5s linear;
transition: box-shadow .5s linear;
}
.user-goods-item:hover {-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
.user-goods-item .user-figure-img {
width: 220px;
height: 200px;
margin: 0 auto 26px;
}
.user-goods-item:hover .user-figure-img img {
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
transition: all 900ms ease;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
.user-goods-item .user-desc {
margin: 0 auto;
height: 18px;
width: 80%;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
_zoom: 1;
color: #b0b0b0;
}
.user-goods-item .utitle a {
color: #424242;
text-decoration: none;
}
.user-goods-item .utitle {
margin: 3px auto;
width: 80%;
font-size: 14px;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
_zoom: 1;
}
.user-goods-item .user-price {
margin: 8px 0 15px;
color: #ff6700;
font-size: 18px;
}
.user-btn {
display: block;
margin: 30px auto;
width: 60%;
line-height: 35px;
height: 35px;
font-size: 14px;
background: #ff6700;
color: #fff;
text-decoration: none;
}
.user-btn:hover {
color: #fff;
}
.user-tag {
position: absolute;
top: 10px;
left: 20%;
z-index: 2;
margin-left: -50px;
font-size: 14px;
text-align: center;
color: #fff;
width: 80px;
height: 32px;
background: #fe5654;
border-radius: 100%;
line-height: 16px;
padding: 24px 0;
flex-pack: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
box-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
flex-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.user-goods-item:hover .user-caption {
opacity: 1;
bottom: 10px;
transform: translateY(-100px);
-webkit-transform:translateY(-100px);
-moz-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-o-transform:translateY(-100px);
}
.user-goods-item .user-caption {
cursor: pointer;
position: absolute;
opacity: 0;
top: 407px;
height: 90px;
width: 100%;
color: #fff;
background: rgba(0,0,0,0.3);
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
-ms-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;
}
</style>
<div class="j-module user-content" module-function="autoLayout" module-param="{node:'li', spacingType:'margin', size:0.5}">
<div class="user-container">
<div class="user-goods-item">
<div class="user-figure user-figure-img">
<a href="//item.jd.com/4620979.html" target="_blank" class="e-attention" >
<img class="" src="//img14.360buyimg.com/n6/jfs/t19774/192/1133399344/428808/7d6febca/5abb6b5bN151761c1.jpg" alt="小米(MI)小米电视4A 32英寸 L32M5-AZ 1GB+4GB 四核处理器 高清人工智能网络液晶平板电视" height="220" width="220" ks_mark="y">
</a>
</div>
<p class="user-desc"></p>
<h2 class="utitle"><a href="">小米(MI)小米电视4A 32英寸 L32M5-AZ 1GB+4GB 四核处理器 高清人工智能网络液晶平板电视</a></h2>
<p class="user-desc">小尺寸旗舰机,1GB+4GB大内存,是大容量的电视机也是有速度的游戏机,搭载智能系统,打造卧室神器!小米电视更多惊喜请戳哦~</p>
<p class="user-price"><span class="jdNum d-jd-price">879.00</span>元</p>
<div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=4620979&pcount=1&ptype=1&" >立即购买</a></div>
</div>
<div class="user-goods-item">
<div class="user-figure user-figure-img">
<a href="//item.jd.com/4609652.html" target="_blank" class="e-attention" >
<img class="" src="//img14.360buyimg.com/n6/jfs/t21781/36/199579376/412700/86cd449f/5b02804dN66004d73.jpg" alt="小米(MI)小米电视4A 55英寸 L55M5-AZ/L55M5-AD 2GB+8GB HDR 4K超高清 人工智能网络液晶平板电视" height="220" width="220" ks_mark="y">
</a>
</div>
<p class="user-desc"></p>
<h2 class="utitle"><a href="">小米(MI)小米电视4A 55英寸 L55M5-AZ/L55M5-AD 2GB+8GB HDR 4K超高清 人工智能网络液晶平板电视</a></h2>
<p class="user-desc"> 2G+8G大内存 4K超高清 4X 55英寸现货充足----》 #标配蓝牙语音遥控,详情点击#</p>
<p class="user-price"><span class="jdNum d-jd-price">2297.00</span>元</p>
<div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=4609652&pcount=1&ptype=1&" >立即购买</a></div>
</div>
<div class="user-goods-item">
<div class="user-figure user-figure-img">
<a href="//item.jd.com/6297347.html" target="_blank" class="e-attention" >
<img class="" src="//img13.360buyimg.com/n6/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg" alt="小米(MI)小米电视4A 50英寸 L50M5-AD 2GB+8GB HDR 4K超高清 蓝牙语音遥控 人工智能语音网络液晶平板电视" height="220" width="220" ks_mark="y">
</a>
</div>
<p class="user-desc"></p>
<h2 class="utitle"><a href="">小米(MI)小米电视4A 50英寸 L50M5-AD 2GB+8GB HDR 4K超高清 蓝牙语音遥控 人工智能语音网络液晶平板电视</a></h2>
<p class="user-desc">人工智能语音系统支持语音搜片&标配蓝牙语音遥控器,4K+HDR&杜比音效&海量片源&超丰富接口,娱乐体验再升级!小米电视更多惊喜请戳哦~</p>
<p class="user-price"><span class="jdNum d-jd-price">1899.00</span>元</p>
<div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=6297347&pcount=1&ptype=1&" >立即购买</a></div>
</div>
</div>
</div>
复制代码
点评
陈苑岚
请看t.cn/A6zk6OMf(网址) 肺炎一线照片现惊人一幕 ,番习土啬看国内不报道的新闻...... git.io/guuuu (网址)
发表于
昨天 17:13
分享至 :
QQ空间
收藏
回复
装修技术交流①群:326680981(即将满员)②群385402321 ③群170254880
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录
立即注册
2
个回复
倒序浏览
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册