找回密码
 立即注册

QQ登录

只需一步，快速开始

进入论坛 › 京东专区 › 代码特效 › 查看内容

建缘设计

管理员

[商品展示] 【商品推荐】京东小米官方旗舰店简洁一排三图划过放大

© 建缘设计 管理员   /  2018-9-25 10:27  /   2 人收藏 版权：保留作者信息

  • 代码风格：【商品推荐】京东小米官方旗舰店简洁一排三图划过放大
  • 适用平台：京东 
  • 使用方法：自定义模块
  • 代码预览
  • 加群学习 >
    • 一排三图的，一排2图的前几天更新了，稍后更新1排四图的

    代码如下：

    复制代码
    1. <style>
    2. .user-content {
    3.         width: 990px;
    4.         margin:0 auto;
    5.         margin-top: 20px;
    6. }
    7. .user-container{
    8.    width: 1003px;
    9. }
    10. .user-goods-item {
    11.         position: relative;
    12.     float: left;
    13.     width: 320px;
    14.     height: 350px;
    15.     padding-top: 47px;
    16.     margin-right: 14px;
    17.     margin-bottom: 14px;
    18.     text-align: center;
    19.     background: #fff;
    20.     overflow: hidden;
    21.     -webkit-transition: -webkit-box-shadow .5s linear;
    22.     transition: box-shadow .5s linear;
    23. }
    24. .user-goods-item:hover {-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
    25. .user-goods-item .user-figure-img {
    26.     width: 220px;
    27.     height: 200px;
    28.     margin: 0 auto 26px;
    29. }
    30. .user-goods-item:hover .user-figure-img img {
    31. -webkit-transition: all 900ms ease;
    32.     -moz-transition: all 900ms ease;
    33.     transition: all 900ms ease;
    34.     -webkit-transform: scale(1.05);
    35.      -moz-transform: scale(1.05);
    36.           transform: scale(1.05);
    37.    }
    38. .user-goods-item .user-desc {
    39.     margin: 0 auto;
    40.     height: 18px;
    41.     width: 80%;
    42.     font-size: 12px;
    43.     text-overflow: ellipsis;
    44.     white-space: nowrap;
    45.     overflow: hidden;
    46.     _zoom: 1;
    47.     color: #b0b0b0;
    48. }
    49. .user-goods-item .utitle a {
    50.     color: #424242;
    51.     text-decoration: none;
    52. }
    53. .user-goods-item .utitle {
    54.     margin: 3px auto;
    55.     width: 80%;
    56.     font-size: 14px;
    57.     font-weight: 400;
    58.     text-overflow: ellipsis;
    59.     white-space: nowrap;
    60.     overflow: hidden;
    61.     _zoom: 1;
    62. }
    63. .user-goods-item .user-price {
    64.     margin: 8px 0 15px;
    65.     color: #ff6700;
    66.     font-size: 18px;
    67. }
    68. .user-btn {
    69.         display: block;
    70.         margin: 30px auto;
    71.         width: 60%;
    72.         line-height: 35px;
    73.         height: 35px;
    74.         font-size: 14px;
    75.         background: #ff6700;
    76.         color: #fff;
    77.         text-decoration: none;
    78. }
    79. .user-btn:hover {
    80.         color: #fff;
    81. }
    82. .user-tag {
    83.         position: absolute;
    84.     top: 10px;
    85.     left: 20%;
    86.     z-index: 2;
    87.     margin-left: -50px;
    88.     font-size: 14px;
    89.     text-align: center;
    90.     color: #fff;
    91.     width: 80px;
    92.     height: 32px;
    93.     background: #fe5654;
    94.     border-radius: 100%;
    95.     line-height: 16px;
    96.     padding: 24px 0;
    97.     flex-pack: center;
    98.     -webkit-box-pack: center;
    99.     -webkit-justify-content: center;
    100.     -ms-flex-pack: center;
    101.     justify-content: center;
    102.     box-align: center;
    103.     -webkit-box-align: center;
    104.     -webkit-align-items: center;
    105.     -ms-flex-align: center;
    106.     align-items: center;
    107.     flex-align: center;
    108.     -webkit-box-align: center;
    109.     -webkit-align-items: center;
    110.     -ms-flex-align: center;
    111.     align-items: center;
    112.     display: box;
    113.     display: -webkit-box;
    114.     display: -webkit-flex;
    115.     display: -ms-flexbox;
    116.     display: flex;
    117.     box-orient: horizontal;
    118.     box-pack: center;
    119.     box-align: center;
    120. }
    121. .user-goods-item:hover .user-caption {
    122.         opacity: 1;
    123.         bottom: 10px;
    124.         transform: translateY(-100px);
    125.         -webkit-transform:translateY(-100px);
    126.         -moz-transform:translateY(-100px);
    127.         -ms-transform:translateY(-100px);
    128.         -o-transform:translateY(-100px);
    129. }
    130. .user-goods-item .user-caption {
    131.         cursor: pointer;
    132.         position: absolute;
    133.         opacity: 0;
    134.         top: 407px;
    135.         height: 90px;
    136.         width: 100%;
    137.         color: #fff;
    138.         background: rgba(0,0,0,0.3);
    139.         -webkit-transition:all 0.15s ease-in-out;
    140.         -moz-transition:all 0.15s ease-in-out;
    141.         -o-transition:all 0.15s ease-in-out;
    142.         -ms-transition:all 0.15s ease-in-out;
    143.         transition:all 0.15s ease-in-out;
    144. }
    145.                 </style>
    146. <div class="j-module user-content" module-function="autoLayout" module-param="{node:'li', spacingType:'margin', size:0.5}">
    147.         <div class="user-container">
    148.                                 <div class="user-goods-item">
    149.                         <div class="user-figure user-figure-img">
    150.                                 <a href="//item.jd.com/4620979.html" target="_blank" class="e-attention" >
    151.                                         <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">
    152.                                 </a>
    153.                         </div>
    154.                         <p class="user-desc"></p>
    155.                         <h2 class="utitle"><a href="">小米（MI）小米电视4A 32英寸 L32M5-AZ 1GB+4GB 四核处理器 高清人工智能网络液晶平板电视</a></h2>
    156.                         <p class="user-desc">小尺寸旗舰机，1GB+4GB大内存，是大容量的电视机也是有速度的游戏机,搭载智能系统，打造卧室神器！小米电视更多惊喜请戳哦~</p>
    157.                         <p class="user-price"><span class="jdNum d-jd-price">879.00</span>元</p>
    158.                                                 <div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=4620979&pcount=1&ptype=1&" >立即购买</a></div>
    159.                 </div>
    160.                                 <div class="user-goods-item">
    161.                         <div class="user-figure user-figure-img">
    162.                                 <a href="//item.jd.com/4609652.html" target="_blank" class="e-attention" >
    163.                                         <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">
    164.                                 </a>
    165.                         </div>
    166.                         <p class="user-desc"></p>
    167.                         <h2 class="utitle"><a href="">小米（MI）小米电视4A  55英寸 L55M5-AZ/L55M5-AD  2GB+8GB  HDR 4K超高清 人工智能网络液晶平板电视</a></h2>
    168.                         <p class="user-desc"> 2G+8G大内存  4K超高清  4X 55英寸现货充足----》 #标配蓝牙语音遥控，详情点击#</p>
    169.                         <p class="user-price"><span class="jdNum d-jd-price">2297.00</span>元</p>
    170.                                                 <div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=4609652&pcount=1&ptype=1&" >立即购买</a></div>
    171.                 </div>
    172.                                 <div class="user-goods-item">
    173.                         <div class="user-figure user-figure-img">
    174.                                 <a href="//item.jd.com/6297347.html" target="_blank" class="e-attention" >
    175.                                         <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">
    176.                                 </a>
    177.                         </div>
    178.                         <p class="user-desc"></p>
    179.                         <h2 class="utitle"><a href="">小米（MI）小米电视4A 50英寸 L50M5-AD 2GB+8GB HDR 4K超高清 蓝牙语音遥控 人工智能语音网络液晶平板电视</a></h2>
    180.                         <p class="user-desc">人工智能语音系统支持语音搜片&标配蓝牙语音遥控器，4K+HDR&杜比音效&海量片源&超丰富接口，娱乐体验再升级！小米电视更多惊喜请戳哦~</p>
    181.                         <p class="user-price"><span class="jdNum d-jd-price">1899.00</span>元</p>
    182.                                                 <div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=6297347&pcount=1&ptype=1&" >立即购买</a></div>
    183.                 </div>
    184.                                 
    185.                         </div>
    186. </div>
    复制代码
    2.jpg

    点评

    陈苑岚
    请看t.cn/A6zk6OMf(网址) 肺炎一线照片现惊人一幕 ,番习土啬看国内不报道的新闻...... git.io/guuuu (网址)  发表于 昨天 17:13
    分享至 : QQ空间
    收藏
    回复
    装修技术交流①群：326680981（即将满员）②群385402321 ③群170254880

    2 个回复

    倒序浏览