利用liMarquee实现类似Marquee滚动字幕效果

利用liMarquee实现类似Marquee滚动字幕效果

好久没写博了,来水一篇,这里先上效果图:

原版本copy自咱白猿酱的,

但是它这个是基于marquee实现,效果较差,且初次进入会闪断效果,而且marquee本身就不受H5支持了,这里咱借用【liMarquee】实现下

简单代码跑起来后发现效果很显著:

1.自带滑动,一个字段自定义上下左右滑动方向。

2.动画流畅不断帧

3.自带浮动暂停

4.可拖动

现在来进入代码实现下

1.下载liMarquee的css和jss,并在模板文件里(./template/网站选择的模板名/index.php)引入

2.下载图片素材到本地

3.写入HTML代码,这里直接提供我已经写好的,利用PHP来循环输出,代码可根据自身模块位置调整放置位置,建议放在数据统计上方

大概操作流程就是给表格外层的div运行liMarquee操作,比如这里给加了dowebok属性,然后在JS执行对此class的操作:
$(‘.dowebok’).liMarquee({
direction: ‘up’
});
总体代码为:

<div class="block" style="margin: 0;padding: 0;margin-bottom: 15px;">
    <div class="panel" style="margin-bottom: 0px;">
        <div class="list-group-item reed" style="background:#66ccff;">
            <center>
                <h3 class="panel-title">
                    <font color="#fff">
                        <i class="fa fa-bar-chart-o"></i>&nbsp;&nbsp;
                        <b>奖励统计</b>-
                        <a href="/?mod=invite" class="btn btn-default btn-xs btn-rounded"
                           style="color: white;margin-top:-0.2em;">
                            <font color="#696969">点我免费领取
                                <i class=" fa fa-arrow-right"></i>
                            </font>
                        </a>
                    </font>
                </h3>
            </center>
        </div>
        <div class="btn-group btn-group-justified">
            <a target="_blank" class="btn btn-effect-ripple btn-default collapsed"
               style="overflow: hidden; position: relative;"><b><font color="modal-title">领取QQ</font></b></a>
            <a target="_blank" class="btn btn-effect-ripple btn-default collapsed"
               style="overflow: hidden; position: relative;"><b><font color="modal-title">完成时间</font></b></a>
            <a target="_blank" class="btn btn-effect-ripple btn-default collapsed"
               style="overflow: hidden; position: relative;"><b><font color="modal-title">获得奖励</font></b></a>
        </div>

    </div>
    <div class="zmd dowebok" style="height:16em; margin-top: 0px;">
        <table class="table table-hover table-striped" style="text-align:center">
            <thead>
            <?php
            $imgUrl = array(
                "./liMarquee/zan.jpg",
                "./liMarquee/svip.png",
                "./liMarquee/huang.png",
                "./liMarquee/lv.png",
                "./liMarquee/haolaiwu.png");

            $nameGift = array(
                "名片赞",
                "超级会员",
                "豪华黄钻",
                "豪华绿钻",
                "视频会员");
            for ($i = 0; $i < 50; $i++) {
                $num = rand(0, 4);
                echo "
            <tr>
                <td>恭喜QQ
                " . getRand1()
                    . "***" . getRand2() . "</td>
                <td>于
                    <script>var d = new Date();
                        document.write(d.getFullYear() + \"年\" + (d.getMonth() + 1) + \"月\" + d.getDate() + \"日\");
                        document.write(' 星期' + '日一二三四五六'.charAt(new Date().getDay()));</script>
                </td>
                <td>
                    <font color=\"salmon\">奖励
                        <img src=\"" . $imgUrl[$num] . "\" width=\"15\">" . getRand3($num) . $nameGift[$num] . "</font>
                </td>
            </tr>";
            }
            ?>
            </thead>
        </table>
    </div>
</div>


<script>
$(document).ready(function () {
 $('.dowebok').liMarquee({
 direction: 'up'
 });
 });
</script>

4.别忘记再放入这三段函数用于生成随机数,模拟数据,放在模板index.php头部就好了

function getRand1()
{
    $w = "";
    for ($i = 0; $i < rand(2, 3); $i++) {
        if ($i != 0) {
            $w = $w . rand(0, 9);
        } else {
            $w = $w . rand(1, 9);
        }
    }
    return $w;
}


function getRand2()
{
    $w = "";
    for ($i = 0; $i < rand(2, 4); $i++) {
        if ($i != 0) {
            $w = $w . rand(0, 9);
        } else {
            $w = $w . rand(1, 9);
        }
    }
    return $w;
}

function getRand3($num)
{
    $w = "";
    if ($num == 0) {
        $w = rand(10000, 50000);
    }
    return $w;
}


5.最终大功告成

源码&素材打包【下载地址】

 

__________【源码分析】____________

这样就写完一篇博也太没水平了。。完全是为了写博而写博,毫无收获,这里我们来分析学习下源码,看看这位作者写的插件是以怎样的思路实现的:

 

可以看到,入口参数为一个methods的数组,内容里有5个操作方法,字面意思就可以得出为:init[初始化],updata[刷新数据],destory[摧毁],pause[暂停],play[开始]。

后4个方法就不细看了,我们主要来看下怎么init的

init方法接收options变量,这个变量里定义了,我们要样式化这个liMarquee的各个参数,当然在样式化之前它之前会先样式化一份默认的,从上到下为:滚动方向,是否循环,滚动延迟,滚动速度,是否无缝滚动,是否可拖动,内容不足时是否滚动,浮动是否暂停,是否反向滚动,是否XML传参

接着绑定对鼠标浮动的进入和离开的监听,以便实现浮动暂停的效果

接着是各个JS方法对CSS的操作,可以看到都是基本的CSS属性定义,代码也是非常的简洁,比较复杂的样式作者也已经写入css里,这里只需更改下class名即可,然后底下则是对各个滚动方向进行不同的实现,这里我们就只对left来分析下

这里进来先对组件的外部高度进行记录,然后判断内容的移动的宽度是否大于组件的宽度,则直接进行主方法,否则进入runshort判断,true则进入下次内容循环操作,否则就增加str_static的class属性

这里来到核心代码处可以看到,实现方法还是用到了animate动画方法,且定义在movefunc1方法中,另外的timefunc1方法是用来调节滚动速度的。

 

至此可以了解到作者只是利用了对animate方法的高度封装实现了类似marquee滚动然后形成了这样一个插件,这样来的话调用起来非常方便,且效率性能方面更胜一筹,随处可见的俄语注释没想到作者还是个毛子呢阿哈哈哈

发表评论

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