今天有麻布岗信息网小编为大家分享以下内容：
淘宝天猫仿京东展示效果代码淘宝天猫仿京东展示效果代码，此效果模仿并结合自京东的首页【生活的橱窗】和服饰配饰下的【特价商品】两个板块效果。 思路及原理： 采用Widget规范 的Carousel - 旋转木马，也就是轮播，鼠标经过的时候添加控件的原理来实现，引用的是官方class。 虽然不能达到hover的完美效果，但是也能达到90%，而且会有轮播功能，觉得反而塞翁失马了，呵呵。（有人会觉得似曾相识，不用在意这些细节。此方法可以拓展出更多功能，有兴趣的可以研究研究）优点及其缺点： 优点：无需css权限，即可基本达到css效果； 缺点：需要开通免费店铺音乐服务；引用的是官方class，具有不确定因素；需要发布才能看见全部效果。（目前此缺点可以忽略）灵感与方法来源：张神、杜神，taobaoux.com……（真不用在意这些细节）兼容性：浏览器兼容性测试IE5IE6IE7IE8IE9IE10IE11火狐谷歌欧朋PNG透明××√√√√√√√√CSS3属性动画与过渡×××××√√√√√理想状态×××××√√√√√-----------------------------------高手可以忽略这个部分……---------------------------------解读：模块基本大小：1200px × 400px①左侧轮播部分：小图模块框架：宽180px高200px;大图模块框架：宽180px高400px;图片制作：小图模块图片大小：宽220px高200px;大图模块图片大小：宽220px高400px。 ┗图片的宽度比模块宽了40px，这40px就是向左滑动的距离。滑动位置的多少根据图片超出多少来定。（例如可以把图片做一张宽180px+180px=360px的，左边180px为一个内容，右边180px为另一个内容，就可以达到左右换图效果）。图片替换：此部分动画是利用背景制作，替换的时候找到对应位置，复制图片网址替换即可；标题则找到对应位置，直接复制图片代码替换即可。代码效果图片：②右侧展示部分：上半部小图模块框架：宽150px高50px;下半部大图模块框架：宽300px高250px;图片制作：图片大小按框架大小制作即可。图片替换：此部分为图片替换的时候找到对应位置，直接复制图片代码替换即可----------------------------------------小弟献丑了-------------------------------------------------<div style="height:400px;"> <div class="footer-more-trigger most-footer" style="width:1200px; height:400px; background:none; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger most-footer" style="width:1200px; height:400px; background:none; border:0; padding:0; top:auto; left:-125px;"> <div class="xm-musicplayer" style=" width:1200px; height:400px;background:#000;position:relative; border-top:0;font-family: microsoft yahei;font-size:18px;"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{ 'activeTriggerCls':'item-text', 'easing':'easeOutStrong', 'navCls':'zsj_nav', 'delay':0.1, 'contentCls':'zsj_content', 'interval':2, 'autoplay':true }"> <div class="zsj_nav search-wrap-cloud" style="width:900px; height:400px; display:block;float: left;"> <a style="display:none;">0 </a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:0;top:auto;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2EaoAbFXXXXXPXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img01.taobaocdn.com/imgextra/i1/230752094/TB2mlIsbFXXXXbFXXXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_A" /> </a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:0;top:200px;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2c4wobFXXXXXTXpXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img03.taobaocdn.com/imgextra/i3/230752094/TB2kBwzbFXXXXXPXXXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_B" /> </a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:400px;width:180px;left:180px;top:0;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2hjQxbFXXXXahXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img01.taobaocdn.com/imgextra/i1/230752094/TB2xuIYbFXXXXXBXpXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_C"/> </a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:360px;top:auto;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2wbkAbFXXXXX3XXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img02.taobaocdn.com/imgextra/i2/230752094/TB2qzIybFXXXXX.XXXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_D" /></a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:360px;top:200px;border:0;padding:0;margin:0;background-image:url(http://img02.taobaocdn.com/imgextra/i2/230752094/TB2yYwqbFXXXXcNXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img01.taobaocdn.com/imgextra/i1/230752094/TB2Bb7sbFXXXXb1XXXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_E" /> </a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:400px;width:180px;left:540px;top:0;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2XWQubFXXXXa8XXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img02.taobaocdn.com/imgextra/i2/230752094/TB2DJI4bFXXXXbtXXXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_F"/> </a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:720px;top:auto;border:0;padding:0;margin:0;background-image:url(http://img04.taobaocdn.com/imgextra/i4/230752094/TB2JBwybFXXXXXiXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img02.taobaocdn.com/imgextra/i2/230752094/TB2y9QzbFXXXXXPXXXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_G" /> </a> <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:720px;top:200px;border:0;padding:0;margin:0;background-image:url(http://img02.taobaocdn.com/imgextra/i2/230752094/TB2D2AAbFXXXXXmXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img02.taobaocdn.com/imgextra/i2/230752094/TB22_szbFXXXXX4XXXXXXXXXXXX_!!230752094.png"" alt=" 仿京东-标题用_H" /> </a> </div> <ul class="zsj_content" style="display:none"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div style="height:400px; width:300px; float:left;position:relative;"> <ul class="footer-more-trigger most-footer" style="width:300px; height:150px; background:none; display:block; border:0; padding:0; top:0px; left:0px;"> <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"> <img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img04.taobaocdn.com/imgextra/i4/230752094/TB22lgJbFXXXXbkXpXXXXXXXXXX_!!230752094.jpg"" alt=" 这是"/> </li> <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"> <img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img04.taobaocdn.com/imgextra/i4/230752094/TB21LUQbFXXXXXeXpXXXXXXXXXX_!!230752094.jpg"" alt=" 一个"/> </li> <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"> <img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img02.taobaocdn.com/imgextra/i2/230752094/TB28jwMbFXXXXacXpXXXXXXXXXX_!!230752094.jpg"" alt=" 关于"/> </li> <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"> <img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img02.taobaocdn.com/imgextra/i2/230752094/TB2MocMbFXXXXXPXpXXXXXXXXXX_!!230752094.jpg"" alt=" 逗逼"/> </li> <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"> <img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img04.taobaocdn.com/imgextra/i4/230752094/TB2hXZLbFXXXXbhXpXXXXXXXXXX_!!230752094.jpg"" alt=" 的"/> </li> <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"> <img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img01.taobaocdn.com/imgextra/i1/230752094/TB2vUsLbFXXXXaDXpXXXXXXXXXX_!!230752094.jpg"" alt=" 故事"/> </li> </ul> <div class="footer-more-trigger most-footer" style="width:300px; height:250px; border:0; padding:0; top:150px; left:0px; background:URL(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2vPZMbFXXXXapXpXXXXXXXXXX_!!230752094.jpg)"> <div class="footer-more" style="width:140px; height:50px; float:none;margin:100px auto; padding:0;"> <a href="#" target="_blank"><img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img02.taobaocdn.com/imgextra/i2/230752094/TB2hpEVbFXXXXbWXXXXXXXXXXXX_!!230752094.png"" alt=" 立即逗逼"/></a> <div class="footer-more-panel" style="width:140px; height:50px; border:0; padding:0; background:none; bottom:auto; right:auto; top:0; left:0;"> <img src="http://www.517338.com/skin/default/image/lazy.gif" class="lazy" original=""http://img04.taobaocdn.com/imgextra/i4/230752094/TB2kRQUbFXXXXbVXXXXXXXXXXXX_!!230752094.png"" alt=" 更多逗逼."/> </div> </div> </div> </div> </div> </div> </div></div>
麻布岗信息网(www.517338.com)综合在线信息,汇聚城市生活,美食,购物,旅游,房产,交通,家居,财经,教育,健康,娱乐,历史,汽车,生活消费门户网站
