[转载]京东SDK模板卡盘效果实现代码 - cnblogs/chen - 博客园

[转载]京东SDK模板卡盘效果实现代码 – cnblogs/chen – 博客园.

最近在做京东模板,因为是最新平台,好多功能都需要摸索,本人技术一般,摸索出一个建议的卡盘功能 各位童鞋,使用的是分类推荐模块哦!

本着共享的精神,俺将代码放到这儿了,各人请自便。(代码还不够完善,希望完善的童鞋可以发给我,直接放到评论里吧!在这里提前谢过哦!呵呵)

 

本人京东设计师:王靖鋆          设计模板: http://zx.jd.com/designerDetail.html?id=148

HTML代码 如下:

复制代码
#if($!moduleTitle.exists)
    <!--<div class="jTm">
        #if($!moduleTitle.titleExists)
            #if($!moduleTitle.title!='')
                <a href="$!moduleTitle.titleLink">$!moduleTitle.title</a>
            #end 
        #end

        #if($!moduleTitle.moreExists)
            #if($!moduleTitle.more!='')
                <div class="jMore"><a href="$!moduleTitle.moreLink">$!moduleTitle.more</a></div>
            #end
        #end

        #if($!moduleTitle.titleExists)
            #if($!moduleTitle.titleImg!='')
              <a href="$!moduleTitle.titleLink"><img src="$!moduleTitle.titleImg" /></a>
            #end
        #end
        #if($!moduleTitle.moreExists)
            #if($!moduleTitle.moreImg!='')
              <div class="jMore"><a href="$!moduleTitle.moreLink"><img src="$!moduleTitle.moreImg" /></a></div>
            #end
        #end
    </div>-->
#end    
#set($intNum=0)
<div class="j-module" module-function="tabAutoLayout" module-param="{}">
        <div class="jSortContent">
            #foreach($!categoryRec in $!goodsCategoryRecList)
                #foreach($!goods in $!categoryRec.goodsList)
                <ul><li>
                    <div class="jItem">
                        <div class="jPicbig">
                        <div class="jaoHot"></div>
                            <a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
                                <img width="350" height="320" src="$!jshopCommon.getImage($!goods.imageurl,1)" alt="$!goods.wname">
                            </a>
                        #if( $!goods.promTag!="")
                        <div class="jPromotionLabel">

                                $!goods.promTag

                        </div>
                        #end
                        </div>
                        <div class="jGoodsInfo">
                            <div class="jTitle"><h1><span style="font-size:17px;">HOT</span> 《热卖商品》</h1></div>
                            <div class="jDesc" title="$!goods.wname $!goods.advertWord">
                                <div class="jWname">
                                <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a></br>
                                </div>
                                <div style="line-height:30px;">
                                    <span class="jSlogan">$!goods.advertWord</span>
                                </div>
                            </div>                          
                            <div class="jPrice">
                                <div class="jSalePrice">
                                    <span class="jText">参考价:</span>
                                    <span class="jRmb"></span>
                                    $!jshopPrice.getSalePrice($!goods.goodsId)
                                </div>
                                <div class="jdPrice">
                                    <span class="jText">促销价:</span>
                                    <span class="jRmb"></span>
                                    $!jshopPrice.getJdPrice($!goods.goodsId)
                                </div>
                            </div>
                            <div class="jBtnArea">
                                <a  href="$!jshopCommon.addCart($!goods.goodsId)"  target="_blank" >加入购物车</a>
                            </div>
                        </div>
                    </div>
                </li></ul>
                #end
            #end
        </div>

        <div class="jSortTab">
            #foreach($!categoryRec in $!goodsCategoryRecList)
                #foreach($!goods in $!categoryRec.goodsList)
                    <span>
                        <div class="jPic">
                            <a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
                                <img width="50" height="50" src="$!jshopCommon.getImage($!goods.imageurl,5)" alt="$!goods.wname">
                            </a>
                        </div>
                    </span>
                #end
            #end
        </div>
        <div class="jSortTabArrow"><b></b></div>
</div>
复制代码

 

CSS代码 如下:

复制代码
.user_PShow{font-family:'microsoft yahei';}
.user_PShow *{font-family:'microsoft yahei';}
.user_PShow .mt{}
.user_PShow .mc{background:#fff; overflow:hidden; position:relative;border-radius:4px;border:5px solid #EDEDED;border-bottom:0px;}
.user_PShow .jSortTab{
    border-top:2px solid #AAAAAA; overflow:hidden; position:relative;
    background-color:#ededed;height:74px;
}
.user_PShow .jSortTab span{float:left; width:158px; padding:7px 0;text-align:center; font-size:14px; font-weight:bold; color:#666;}
.user_PShow .jSortTab span.current{
    color:#FFFFFF;background-color:#FFFFFF;
}
.user_PShow .jSortTabArrow{width:158px; position:absolute; z-index:1; top:25px; left:0; height:7px; overflow:hidden; text-align:center;}
.user_PShow .jSortTabArrow b{display:inline-block; margin-top:-8px; width:0; height:0; border-width:10px; border-color:transparent transparent #E4393C transparent; overflow:hidden; zoom:1; font-size:0;}
.user_PShow .jSortContent{
    overflow:hidden;border-bottom:1px solid #F1F1F1;height:100%;
}
.user_PShow .jSortContent ul{overflow:hidden; display:none;}
.user_PShow .jSortContent ul.current{
    display:block;padding:10px;
}
.user_PShow li{width:157px; overflow:hidden; float:left;}

.user_PShow .jPic{
    padding:5px; text-align:center;background-color:#c3c3c3;width:50px;margin:0px auto;
}
.user_PShow .jDesc{
    height:55%; line-height:1.3; overflow:hidden;margin:10px 0px;
}
.user_PShow .jDesc a{color:#666;font-size:13px;}
.user_PShow .jDesc a:hover{color:#E4393C; text-decoration:underline;}
.user_PShow .jdPrice .jRmb{font-size:12px;}
.user_PShow .jdPrice .jdNum{font-size:15px;}
.user_PShow .jdPrice .jdNumNo{font-size:12px;}
.user_PShow .jMore{
     position:absolute;right:0px;top:0px;text-align:center;
}
.user_PShow .jTm{
    height:auto;
    position:relative;
}

.user_PShow .jPicbig{
    text-align:center;float:left;border:5px solid #ededed;
}
.user_PShow .jGoodsInfo{
    float:left;margin-left:30px;height:330px;width:550px;overflow:hidden;
}
.user_PShow .jSortContent ul li{
    width:100% !important;
}
.user_PShow .jTitle{
    background-color:#E7492E;
    font-size:15px;color:#FFFFFF;padding:5px 15px;
}
.user_PShow .jPrice,.user_PShow .jBtnArea,.user_PShow .jDesc{
    padding:0px 15px;
}
.user_PShow .jPrice{
    color:#c3c3c3;font-weight:bold;line-height:25px;min-height:45px;text-align:right;
}
.user_PShow .jBtnArea{
    color:#FFFFFF;font-weight:bold;line-height:43px;padding:0px;
}
.user_PShow .jBtnArea a,.user_PShow .jBtnArea .btn-coll{
    display:block; background: url("file/loadImage.html?templateId=5&imageName=Bjsale.png") no-repeat scroll 0 0 transparent;
    width:200px;height:40px;margin:0px auto;line-height:40px;text-align:center;color:#FFFFFF;font-size:17px;float:right;
}
.user_PShow .jBtnArea .btn-coll{
    background: url("file/loadImage.html?templateId=5&imageName=Bjsalegz.png") no-repeat scroll 0 0 transparent;float:left;
    cursor: pointer;
    display: block;
    vertical-align: top;font-weight:bold;;width:200px;height:40px;margin:0px;padding:0px;
}
.user_PShow .jAdvertWord{
    font-size:12px;height:30%;margin:10px 0px;
}
.user_PShow .jSalePrice{ text-decoration:line-through; overflow:hidden; clear:both;}
.user_PShow .jdPrice{color:#ff0000; overflow:hidden;font-weight:bold;}
.user_PShow h1{font-weight:bold;}
.user_PShow .jWname{margin:10px 0px;width:100%;text-align:center;border-bottom:2px solid #C3C3C3;}
.user_PShow .jSlogan{color:#565656;font-size:17px;font-weight:bold;}
.user_PShow .jaoHot{
    background: url("file/loadImage.html?templateId=5&imageName=hotjao.png") no-repeat scroll 0 0 transparent;width:84px;height:84px;
    position:absolute;left:6px;top:7px;
}

.user_PShow .jPromotionLabel{padding:15px 0px;color:#FFFFFF;font-size:12px;width:56px; height:55px;text-align:center; background:url("file/loadImage.html?templateId=5&imageName=promTag.png") no-repeat;  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img10.360buyimg.com/cms/g8/M02/0F/11/rBEHZ1C0Ma8IAAAAAAAIpkn1m8MAADCTQP_7yMAAAi-795.png'); _background-image:none;  position:absolute; top:4px; left:310px;}
.user_PShow .jPromotionTextArea{width:56px;font-size:12px;overflow:hidden; text-align:center; padding-top:35px;color:#fff;}
.user_PShow .jPromotionText1{}
.user_PShow .jPromotionNum{}
.user_PShow .jPromotionText2{}
.user_PShow .jSortTab span.current .jPic{
    background-color:#FF0000;
}
复制代码

 

赞(0) 打赏
分享到: 更多 (0)

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

支付宝扫一扫打赏

微信扫一扫打赏