#vue2.0 实现公告栏左右无缝滚动#



先上效果图:

image.png


html文档结构如下:

<div class="notice-text">
    <img src="Images/notice-icon.png" alt="公告" />
    <div class="notice-list-box">
        <ul class="notice-list" id="notice_list" :style="{width:ulWidth}">
            <li>大量收售金币,大量买卖金币100w金币=95元QQ990413374</li>
            <li>属性定义了项目在主轴上的对齐方式。</li>
        </ul>
    </div>

</div>


样式定义如下:

.notice-text {
    height: 25px;
    display: block;
    float: left;
}

.notice-text img {
    float: left;
}

.notice-list {
    position: relative;
    left: 0;
}

.notice-list-box {
    position: relative;
    overflow: hidden;
    margin-left: 40px;
    height: 100%;
}

.notice-list li {
    color: #fff;
    float: left;
    width: 600px;
    cursor: pointer;
}


(:style == v-bind:style)这里首先给ul绑定一个style,意义在于你不用给ul设置固定的宽度,ul的宽度通过js来动态加载。

ul宽度动态加载实现步骤:

1、给ul绑定style【下面为简写模式】:

:style="{ width: ulWidth }"

2、在js文件new一个新的vue对象,在对象的data里面创建初始值。

data: {
    ulWidth: "0px"
}

3、通过动态获取li的length来动态计算ul的长度。this.$nextTick() {}的作用是为了确保文档已经加载完成。

mounted: function() {
    this.$nextTick(function() {

        this.createUlWidth();

        this.ulGunDong();
    });
}

4、创建createUlWithd函数,当然这个方法需要放在vue的methods里面;

createUlWidth: function() {

    var all_li = document.getElementById("notice_list")

.getElementsByTagName("li").length + 1;

    this.ulWidth = all_li * 600 + "px";
}

这样ul的宽度绑定就完成了。接下来就是滚动函数的实现。


先上代码:

ulGunDong: function() {
    setTimeout(function() {
        var ul = document.getElementById("notice_list");
        var li = ul.getElementsByTagName("li");
        var speed = -1;
        var timer = null;

        var new_li = li[0].cloneNode(true)
        ul.appendChild(new_li);


        // 滚动

        timer = setInterval(function() {
            ul.style.left = ul.offsetLeft + speed + 'px';
            if (ul.offsetLeft == -ul.offsetWidth + 600) {
            ul.style.left = '0';
        }
        }, 30);


        // 鼠标移入停止滚动

        ul.onmouseover = function() {
            clearInterval(timer);
        };


        // 鼠标移出重新开始滚动

        ul.onmouseout = function() {
            timer = setInterval(function() {
                ul.style.left = ul.offsetLeft + speed + 'px';
                if (ul.offsetLeft == -ul.offsetWidth + 600) {
                ul.style.left = '0';
            }
            }, 30);
        };
    }, 1000);
}