制作一个霓虹灯闪动代码非GIF图片 | 墨兮风电商博客 — 做专业的电商个人博客

收集分享
电商最优秀的资源


制作一个霓虹灯闪动代码非GIF图片

其实这款代码细心一点的都可以看出就是一个自动轮播代码只是把速度调快了一些而已,感兴趣的可以试试,可以用来制作banner的霓虹灯效果。

 

以下代码无需开通CSS权限,直接复制进店铺即可使用。代码都经过测试使用,所以几乎不存在使用不了的情况。如果发生图片缺失或者不显示的情况可以自己替换一张同尺寸的图片进行浏览测试,图片不显示的情况可能是图片源地址遭到删除丢失【如代码预览没有效果请发布以后再浏览】

部分代码含有淘宝class="J_TWidget"功能,如果需要在本地浏览代码效果在代码最开头加上如下代码:
<script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/prettify.js" type="text/javascript"></script>
<script src="http://a.tbcdn.cn/s/kissy/1.1.6/kissy.js"></script>
<script src="http://a.tbcdn.cn/p/shop/1.0/mods/s/countdown/countdown-min.js"></script>
<script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/jquery-min-1.4.js"></script>
<script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/wiki.js"></script>
<script>
KISSY.ready(function(S){
S.Countdown.autoRender();
});
</script>

兮风QQ:2802813994。微信号:jiyaoshijue(或扫右边二维码)如有疑问欢迎加我谈论。

图片是样例,内容可以自行替换也可以达到效果。如果觉得本文好也可以发转发给身边的朋友分享。



大家如果想学习哪家店铺的代码可以在下面留言 我会在店铺装修专栏里不定时为大家分解讲解代码的使用。

* 代码版权归原创者所有,本文仅用作参考,本博客不承担任何责任。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<style type="text/css">

.sys12_yhq{ width:675px; height:134px; overflow:hidden; position:absolute}

.sys12_yhq .lb_zt{ display:none}

.sys12_yhq .navtitle{width:675px; height:134px; overflow:hidden; margin:0px; padding:0px;}

.sys12_yhq .navtitle li{ float:left; position:relative; cursor:pointer}

.sys12_yhq .navtitle li.ks-active .s12_yhq .yhq12_bian{opacity:0; transition:all 0.3s ease 0s}

.sys12_yhq .navtitle li .s12_yhq { width:225px; height:134px; overflow:hidden; position:relative}
.sys12_yhq .navtitle li .s12_yhq .yhq12_bian{ position:absolute; top:0px; left:0px;width:225px; height:134px;}

.sys12_yhq .navtitle li.ks-active .s12_yhq .yhq12_bian{opacity:0; transition:all 0.3s ease 0s}

.sys12_yhq .navtitle li.ks-active .s12_yhq:hover .yhq12_bian{opacity:0; transition:all 0.3s ease 0s}

</style>

 
  <div class="sys12_yhq">
    <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'navCls':'navtitle','contentCls':'lb_zt','effect': 'fade','easing': 'easeOutStrong', 'viewSize': [1950], 'circular': true,'prevBtnCls': 'prev', 'nextBtnCls': 'next' ,'interval':'0.2','autoplay':'true'}" >
      <ul class="lb_zt">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
      </ul>
      <ul class="navtitle">
        <li  >
            <div class="s12_yhq">
                <span class="yhq12_bian"><img src="https://img.alicdn.com/imgextra/i2/794977969/TB2rTnhhVXXXXatXXXXXXXXXXXX_!!794977969.png" width="225" height="134" /></span>
                <img src="https://img.alicdn.com/imgextra/i1/794977969/TB2QP_bhVXXXXbiXXXXXXXXXXXX_!!794977969.png" width="225" height="134" />
            </div>
        </li>
       
        <li>
            <div class="s12_yhq">
                <span class="yhq12_bian"><img src="https://img.alicdn.com/imgextra/i2/794977969/TB2VKaVhVXXXXbmXpXXXXXXXXXX_!!794977969.png" width="225" height="134" /></span>
                <img src="https://img.alicdn.com/imgextra/i4/794977969/TB2ANrmhVXXXXXuXXXXXXXXXXXX_!!794977969.png" width="225" height="134" />
            </div>
        </li>
       
        <li>
            <div class="s12_yhq">
                <span class="yhq12_bian"><img src="https://img.alicdn.com/imgextra/i2/794977969/TB22DfnhVXXXXXqXXXXXXXXXXXX_!!794977969.png" width="225" height="134" /></span>
                <img src="https://img.alicdn.com/imgextra/i1/794977969/TB2nmiUhVXXXXbeXpXXXXXXXXXX_!!794977969.png" width="225" height="134" />
            </div>
        </li>
      </ul>
    </div>
</div>

本章转自互联网,如有冒犯请联系版主修正 兮风电商博客 » 制作一个霓虹灯闪动代码非GIF图片




喜欢 16

发表评论

电子邮件地址不会被公开。 必填项已用*标注

最新文章

  • 去评论
  • 去顶部