今天和大家分享一款非常酷的全屏背景流動層效果代碼,專業(yè)版基礎(chǔ)版都適用喔!
使用方法:
由于淘寶不準(zhǔn)使用別人空間的圖片,各位先把這二個圖片下載,上傳到自己的圖片空間才可以喔 !上傳之后把代碼里面的這二個圖片地址換成你自己空間的圖片地址。
海報地址:http://img04.taobaocdn.com/imgextra/i4/867101640/TB2XoiUaFXXXXazXXXXXXXXXXXX-867101640.png
流動背景:http://img02.taobaocdn.com/imgextra/i2/867101640/TB2BoOWaFXXXXXmXXXXXXXXXXXX-867101640.jpg
點擊代碼文本框下方的復(fù)制按鈕,就可以復(fù)制了,復(fù)制成功后,進入你的淘寶賣家中心---店鋪裝修--在右側(cè)新建立一個自定義區(qū)--然后在把復(fù)制的代碼粘貼進來就可以了(注意要在代碼模式下粘貼,要不然會不成功的!)最后點擊確定--發(fā)布 就大功能造成了!案例:http://feimayi.taobao.com
效果圖如下 :
下面是專業(yè)版所使用的代碼:
<div class="J_TWidget" data-widget-config="{"effect":"fade","circular":true ,"contentCls":"feimayi-taobao-com","navCls":"none","autoplay":"false"}" data-widget-type="Tabs" style="width:950px;height:650px;" data-title="飛螞蟻模板網(wǎng)"> <div class="feimayi-taobao-com"> <div class="pa4245" style="height:650px;width:950px;"> <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:650px;padding:0px;border:none;display:block;top:0px;left:-485px;z-index:10;overflow:hidden;top:0px;"> <marquee behavior="alternate" scrollamount="2" style="height:100%;width:100%;"> <div style="background:url(http://img02.taobaocdn.com/imgextra/i2/867101640/TB2BoOWaFXXXXXmXXXXXXXXXXXX-867101640.jpg) scroll center top;width:9999999px;height:999999px;"> </div> </marquee> </div> <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:650px;padding:0px;border:none;display:block;top:0px;left:-485px;z-index:15;overflow:hidden;background:url(http://img04.taobaocdn.com/imgextra/i4/867101640/TB2XoiUaFXXXXazXXXXXXXXXXXX-867101640.png) top center no-repeat;"> <a href="http://feimayi.taobao.com" target="_blank" style="float:left;width:1920px;height:650px;display:block;"></a> </div> </div> </div> </div>
<div class="J_TWidget" data-widget-config="{"effect":"fade","circular":true ,"contentCls":"feimayi-taobao-com","navCls":"none","autoplay":"false"}" data-widget-type="Tabs" style="width:950px;height:650px;" data-title="飛螞蟻模板網(wǎng)"> <div class="feimayi-taobao-com"> <div class="pa4245" style="height:650px;width:950px;"> <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:650px;padding:0px;border:none;display:block;top:0px;left:-485px;z-index:10;overflow:hidden;top:0px;"> <marquee behavior="alternate" scrollamount="2" style="height:100%;width:100%;"> <div style="background:url(http://img02.taobaocdn.com/imgextra/i2/867101640/TB2BoOWaFXXXXXmXXXXXXXXXXXX-867101640.jpg) scroll center top;width:9999999px;height:999999px;"> </div> </marquee> </div> <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:650px;padding:0px;border:none;display:block;top:0px;left:-485px;z-index:15;overflow:hidden;background:url(http://img04.taobaocdn.com/imgextra/i4/867101640/TB2XoiUaFXXXXazXXXXXXXXXXXX-867101640.png) top center no-repeat;"> <a href="http://feimayi.taobao.com" target="_blank" style="float:left;width:1920px;height:650px;display:block;"></a> </div> </div> </div> </div>
下面是基礎(chǔ)版所使用的代碼:
<div class="J_TWidget" data-widget-config="{"effect":"fade","circular":true ,"contentCls":"feimayi-taobao-com","navCls":"none","autoplay":"false"}" data-widget-type="Tabs" style="width:950px;height:650px;" data-title="飛螞蟻模板網(wǎng)"> <div class="feimayi-taobao-com"> <div class="pa4245" style="height:650px;width:950px;"> <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:650px;padding:0px;border:none;display:block;top:0px;left:-685px;z-index:10;overflow:hidden;top:-20px;"> <marquee behavior="alternate" scrollamount="3" style="height:100%;width:100%;"> <div style="background:url(//gdp.alicdn.com/imgextra/i4/1604414189/TB2uAqNdVXXXXbeXpXXXXXXXXXX_!!1604414189.jpg) scroll center top;width:9999999px;height:999999px;"> </div> </marquee> </div> <div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:650px;padding:0px;border:none;display:block;top:-20px;left:-685px;z-index:15;overflow:hidden;background:url(//gdp.alicdn.com/imgextra/i3/1604414189/TB2McC6dVXXXXaUXXXXXXXXXXXX_!!1604414189.png) top center no-repeat;"> <a href="//item.taobao.com/item.htm?spm=686.1000925.0.0.EjSyIl&id=35995130110&scene=taobao_shop" target="_blank" style="float:left;width:1920px;height:650px;display:block;"></a> </div> </div> </div> </div>