DEMO:

<!DOCTYPE html>
<html>

<head>
　　<title>滚动播报</title>
　　<meta charset="UTF-8">
　　<style>
　　　　.content {
　　　　　　height: 60px;
　　　　　　background-color: #2c2c34;
　　　　　　overflow: hidden;
　　　　}

　　　　.content ul {
　　　　　　white-space: nowrap;
　　　　}

　　　　.content ul li {
　　　　　　position: relative;
　　　　　　font-size: 14px;
　　　　　　vertical-align: middle;
　　　　　　line-height: 35px;
　　　　　　padding: 0 8px;
　　　　　　white-space: nowrap;
　　　　　　display: inline-block;
　　　　　　color: #fff
　　　　}

　　　　#scrollBox {
　　　　　　overflow: hidden;
　　　　}

　　　　#scrollBox .scrollWrap {
　　　　　　width: 500%
　　　　}

　　　　.scrollCont {
　　　　　　float: left;
　　　　}
　　</style>
</head>

<body>
　　<div class="content">
　　　　<ul>
　　　　　　<div id="scrollBox">
　　　　　　　　<div class="scrollWrap">
　　　　　　　　　　<div id="scrollContOne" class="scrollCont">
　　　　　　　　　　　　<li>我是第一条数据</li>
　　　　　　　　　　　　<li>我是第二条数据</li>
　　　　　　　　　　　　<li>我是第三条数据</li>
　　　　　　　　　　　　<li>我是第四条数据</li>
　　　　　　　　　　　　<li>我是第五条数据</li>
　　　　　　　　　　　　<li>我是第六条数据</li>
　　　　　　　　　　　　<li>我是第七条数据</li>
　　　　　　　　　　　　<li>我是第八条数据</li>
　　　　　　　　　　</div>
　　　　　　　　　　<div id="scrollContTwo" class="scrollCont"></div>
　　　　　　　　</div>
　　　　　　</div>
　　　　</ul>
　　</div>

　　<script>
　　　　let speed = 40

　　　　let scrollBox = document.getElementById("scrollBox");

　　　　let scrollContOne = document.getElementById("scrollContOne");

　　　　let scrollContTwo = document.getElementById("scrollContTwo");

　　　　scrollContTwo.innerHTML = scrollContOne.innerHTML;

　　　　scrollBox.scrollLeft = 0;

　　　　function scrollRadio() {

　　　　　　if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) {

　　　　　　　　scrollBox.scrollLeft -= scrollContOne.offsetWidth

　　　　　　} else {

　　　　　　　　scrollBox.scrollLeft += 2;

　　　　　　}

　　　　}

　　　　let MyScrollRadio = setInterval(scrollRadio, speed);

　　　　scrollBox.onmouseover = function() {

　　　　　　clearInterval(MyScrollRadio)

　　　　};

　　　　scrollBox.onmouseout = function() {

　　　　　　MyScrollRadio = setInterval(scrollRadio, speed)

　　　　};

　　</script>

</body>

</html>

在Vue中使用：

<template>

　　<div class="content">

　　　　<ul>

　　　　　　<div id="scrollBox">

　　　　　　　　<div class="scrollWrap">

　　　　　　　　　　<div id="scrollContOne" class="scrollCont">

　　　　　　　　　　　　<li v-for="item in items">

　　　　　　　　　　　　　　<a href="{{item}" target="_blank"></a>

　　　　　　　　　　　　</li>

　　　　　　　　　　</div>

　　　　　　　　　　<div id="scrollContTwo" class="scrollCont"></div>

　　　　　　　　</div>

　　　　　　</div>

　　　　</ul>

　　</div>

</template>

<style scoped>

　　.content {

　　　　height: 60px;

　　　　background-color: #2c2c34;

　　　　overflow: hidden;

　　}

　　.content ul {

　　　　white-space: nowrap;

　　}

　　.content ul li {

　　　　position: relative;

　　　　font-size: 14px;

　　　　vertical-align: middle;

　　　　line-height: 35px;

　　　　padding: 0 8px;

　　　　white-space: nowrap;

　　　　display: inline-block;

　　}

　　.content ul li a {

　　　　text-decoration: none;

　　　　color:#fff;
　　}

　　#scrollBox {

　　　　overflow: hidden;

　　　　margin-left: 36px;

　　}

　　#scrollBox .scrollWrap {

　　　　width: 500%

　　}

　　.scrollCont {

　　　　float: left;

　　}

</style>

<script>

export default {

　　data: () => ({

　　　　canScrollTimer: 0

　　}),

　　vuex: {
            getters: {
                scrollLists: state => state.scrollLists
            }
        },

　　watch:{

　　　scrollLists:{

　　　　deep:true,

　　　　handler(v,ov){

　　　　　　if(v.length){

　　　　　　　　　　this.run();

　　　　　　　　}

　　　　　　}

　　　　}　

　　},

　　methods: {

　　　　run() {

　　　　　　let speed = 40;

　　　　　　let scrollBox = document.getElementById("scrollBox");

　　　　　　let scrollContOne = document.getElementById("scrollContOne");

　　　　　　let scrollContTwo = document.getElementById("scrollContTwo");

　　　　　　scrollContTwo.innerHTML = scrollContOne.innerHTML;

　　　　　　scrollBox.scrollLeft = 0;

　　　　　　function scrollRadio() {

　　　　　　　　if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) {

　　　　　　　　　　scrollBox.scrollLeft -= scrollContOne.offsetWidth

　　　　　　　　} else {

　　　　　　　　　　scrollBox.scrollLeft += 2;

　　　　　　　　}
　　　　　　}

　　　　　　let MyScrollRadio = setInterval(scrollRadio, speed);

　　　　　　scrollBox.onmouseover = function() {

　　　　　　　　clearInterval(MyScrollRadio)

　　　　　　};

　　　　　　scrollBox.onmouseout = function() {

　　　　　　　　MyScrollRadio = setInterval(scrollRadio, speed)

　　　　　　};

　　　　}

　　},

　　ready() {

　　　　//接口调用

　　}

}

</script>

Js跑马灯效果 && 在Vue中使用的更多相关文章

  1. js跑马灯效果

    function nextPage() {           /*         克隆第一张图片并添加到box后         box前移一张图片的距离动画         动画回调里把box的 ...

  2. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. Vue学习笔记四：跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  4. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  5. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  6. JS实现跑马灯效果(向左，向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

  7. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  8. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  9. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

随机推荐

  1. 深度剖析HBase负载均衡和性能指标

    深度剖析HBase负载均衡和性能指标 在分布式系统中,负载均衡是一个非常重要的功能,HBase通过Region的数量实现负载均衡,即通过hbase.master.loadbalancer.class实 ...

  2. linux实验-基本指令1

    1.root帐号登录,查看/tmp目录,如果/tmp目录下没有子目录myshare,则建立该目录. 2.创建帐号testuser. 3.把myshare目录及其目录下的所有文件和子目录的拥有者该为te ...

  3. idea启动spring boot无法加载或找不到主类

    问题产生原因:moudle名称修改,导致项目启动不了 在Terminal界面中执行以下三个命令,我在执行第一个命令的时候报了一个找不到dependency的错误,把那个报错的dependency删了就 ...

  4. [Jmeter]jmeter数据库性能测试配置

    学习jmeter过程中,记录一些学习过程中的点点滴滴,用于备忘.本文主要介绍的是如何创建一个简单的测试计划用户测试数据库服务器. 一.添加线程组 二.添加JDBC请求 1.在第一步里面定义并发用户以及 ...

  5. Error: Error while compiling statement: FAILED: SemanticException Unable to determine if hdfs://hadoopNode2:8020/user/hive/warehouse/test is encrypted...

    1.发现问题: 在hive客户端或者beeline查询hive表时候报错: 根据报错信息查看,是在集群namenode做了HA之后,产生的hdfs路径不对的问题: 2.解决问题,修改hive元数据my ...

  6. 深度学习之卷积神经网络CNN

    转自:https://blog.csdn.net/cxmscb/article/details/71023576 一.CNN的引入 在人工的全连接神经网络中,每相邻两层之间的每个神经元之间都是有边相连 ...

  7. L007- linux系统优化进阶课堂小节

    首先把这节课所讲的大概引锁一下,然后下面详细列举. 1.填加普通用户,通过sudo管理. 2.更改默认的SSH服务端口及禁止root用户远程连接. 3.定时自动更新服务器时间 4.关闭防火墙(ipta ...

  8. Ngix配置，让所有请求指向同一个文件

    统一入口使所有请求在同一个文件先验证处理,Ngix添加如下代码: location / { try_files '' /index.php; }

  9. lua敏感词过滤

    --过滤敏感词(如果onlyKnowHas为true,表示只想知道是否存在敏感词,不会返回过滤后的敏感词,比如用户注册的时候,我们程序是只想知道用户取的姓名是否包含敏感词的(这样也能提高效率,检测到有 ...

  10. 在阿里云上遇见更好的Oracle（四）

    2016.5.13,北京,第七届数据库技术大会. 从最初的itpub社区,到后来被it168收购,DBA社区的线下聚会发展成2010年第一届数据库技术大会(DTCC).第一届大会汇聚了社区内活跃的各位 ...