淘宝代码 带多细节图放大效果宝贝展示代码.zip

<div style="height:496px;"> <div class="footer-more-trigger" style="width:950px; height:496px; border:0; padding:0; top:auto; left:auto;"> <div style="width:950px;background-color:#ffffff;"> <!--宝贝01--> <div style="width:310px; height:496px; float:left;"> <!--新品标签--> <div class="footer-more-trigger" style="width:60px; height:73px; border:0px; padding:0px; top:auto; left:auto; z-index:99"> <img src="http://img04.taobaocdn.com/L1/142/404353463/modules/tshop-um-y22-02/assets/images/def.gif" /></div> <!--//新品标签--> <div style="width:310px; height:8px;"></div> <div style="width:310px; height:310px;"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/propic/1.jpg" /> </div> <div style="height:48px;"><p style="line-height:2; color:#989898;font-family:microsoft yahei; padding:5px; font-size:12px;">清新怡人透爽夏季连衣裙 优雅恬静 店铺开张超值优惠中 低价折扣进行时</p></div> <div style="width:310px; height:130px;"> <div style="padding:0 5px; height:30px; overflow:hidden;"> <div style="color:#bc896a; float:left; line-height:2;width:150px; height:30px; padding-top:5px;">细节图展示</div> <div style="width:150px; height:30px; float:left; text-align:right;"> <span style="font-family:microsoft yahei; color:#bc2d16;">￥</span> <span style="font-size:22px; font-family:Arial; color:#bc2d16;">99.90</span> </div> </div> <div style="clear:both; height:1px;"></div> <div style="width:310px; height:100px;"> <div class="detail01" style="width:100px; height:100px; float:left; display:inline;"><img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/1_1.jpg" width="100" height="100" /></div> <div class="detail02" style="width:100px; height:100px; float:left; display:inline; margin-left:5px;"><img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/1_2.jpg" width="100" height="100" /></div> <div class="detail03" style="width:100px; height:100px; float:left; display:inline; margin-left:5px;"><img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/1_3.jpg" width="100" height="100" /></div> </div> </div> </div> <!--弹出细节01--> <div class="J_TWidget" style="display:none; width:310px; height:310px;" data-widget-type="Popup" data-widget-config="{'trigger':'.detail01','align':{'node':'.detail02','points':['tc','bc'],'offset':[0,-5]}}"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/1_1.jpg" /> </div> <!--//弹出细节01--> <!--弹出细节02--> <div class="J_TWidget" style="display:none; width:310px; height:310px;" data-widget-type="Popup" data-widget-config="{'trigger':'.detail02','align':{'node':'.detail02','points':['tc','bc'],'offset':[0,-5]}}"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/1_2.jpg" /> </div> <!--//弹出细节02--> <!--弹出细节03--> <div class="J_TWidget" style="display:none; width:310px; height:310px;" data-widget-type="Popup" data-widget-config="{'trigger':'.detail03','align':{'node':'.detail02','points':['tc','bc'],'offset':[0,-5]}}"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/1_3.jpg" /> </div> <!--//弹出细节03--> <!--//宝贝01--> <!--宝贝02--> <div style="width:310px; height:496px; float:left; margin-left:10px; display:inline;"> <!--新品标签--> <div class="footer-more-trigger" style="width:60px; height:73px; border:0px; padding:0px; top:auto; left:auto; z-index:99"> <img src="http://img04.taobaocdn.com/L1/142/404353463/modules/tshop-um-y22-02/assets/images/def.gif" /></div> <!--//新品标签--> <div style="width:310px; height:8px;"></div> <div style="width:310px; height:310px;"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/propic/2.jpg" /> </div> <div style="height:48px;"><p style="line-height:2; color:#989898;font-family:microsoft yahei; padding:5px; font-size:12px;">清新怡人透爽夏季连衣裙 优雅恬静 店铺开张超值优惠中 低价折扣进行时</p></div> <div style="width:310px; height:130px;"> <div style="padding:0 5px; height:30px; overflow:hidden;"> <div style="color:#bc896a; float:left; line-height:2;width:150px; height:30px; padding-top:5px;">细节图展示</div> <div style="width:150px; height:30px; float:left; text-align:right;"> <span style="font-family:microsoft yahei; color:#bc2d16;">￥</span> <span style="font-size:22px; font-family:Arial; color:#bc2d16;">99.90</span> </div> </div> <div style="clear:both; height:1px;"></div> <div style="width:310px; height:100px;"> <div class="detail04" style="width:100px; height:100px; float:left; display:inline;"><img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/2_1.jpg" width="100" height="100" /></div> <div class="detail05" style="width:100px; height:100px; float:left; display:inline; margin-left:5px;"><img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/2_2.jpg" width="100" height="100" /></div> <div class="detail06" style="width:100px; height:100px; float:left; display:inline; margin-left:5px;"><img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/2_3.jpg" width="100" height="100" /></div> </div> </div> </div> <!--弹出细节01--> <div class="J_TWidget" style="display:none; width:310px; height:310px;" data-widget-type="Popup" data-widget-config="{'trigger':'.detail04','align':{'node':'.detail05','points':['tc','bc'],'offset':[0,-5]}}"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/2_1.jpg" /> </div> <!--//弹出细节01--> <!--弹出细节02--> <div class="J_TWidget" style="display:none; width:310px; height:310px;" data-widget-type="Popup" data-widget-config="{'trigger':'.detail05','align':{'node':'.detail05','points':['tc','bc'],'offset':[0,-5]}}"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/2_2.jpg" /> </div> <!--//弹出细节02--> <!--弹出细节03--> <div class="J_TWidget" style="display:none; width:310px; height:310px;" data-widget-type="Popup" data-widget-config="{'trigger':'.detail06','align':{'node':'.detail05','points':['tc','bc'],'offset':[0,-5]}}"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/partimg/2_3.jpg" /> </div> <!--//弹出细节03--> <!--//宝贝02--> <!--宝贝03--> <div style="width:310px; height:496px; float:left; margin-left:10px; display:inline;"> <!--新品标签--> <div class="footer-more-trigger" style="width:60px; height:73px; border:0px; padding:0px; top:auto; left:auto; z-index:99"> <img src="http://img04.taobaocdn.com/L1/142/404353463/modules/tshop-um-y22-02/assets/images/def.gif" /></div> <!--//新品标签--> <div style="width:310px; height:8px;"></div> <div style="width:310px; height:310px;"> <img src="http://img04.taobaocdn.com/L1/142/404624307/assets/images/brown/propic/3.jpg" /> </div> <div style="height:48px;"><p style="line-height:2; color:#989898;font-family:microsoft yahei; padding:5px; font-size:12px;">清新怡人透爽夏季连衣裙 优雅恬静 店铺开张超值优惠中 低价折扣进行时</p></div> <div style="width:310px; height:130px;"> <div style="padding:0 5px; height:30px; overflow:hidden;"> <div style="color:#bc896a; float:left; line-height:2;width:150px; height:30px; padding-top:5px;">细节图展示</div> <div style="width:150px; height:30px; float:left; text-align:right;"> <span style="font-family:microsoft yahei; color:#bc2d16;">￥</span> <span style="font-size:22px; font-family:Arial; color:#bc2d16;">99.90</span> </div> </div> <div style="clear:both; height:1px;"></div> <div style="width:310px; height:100px;"> <div class="detail07" style="width:100px; height:100px; float:left; display:inline;"><i