Javascript怎么实现字幕滚动


本文摘自PHP中文网,作者藏色散人,侵删。

Javascript实现字幕滚动的方法:首先创建HTML和css文件;然后将容器设置固定宽度,并设置超出部分隐藏;最后创建js文件并通过定时器改变位置即可。

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

Javascript怎么实现字幕滚动

原生js实现字幕滚动

使用css和原生js实现的字幕滚动效果,无缝衔接

效果

在这里插入图片描述

原理

容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置

实现

  • html部分

1

2

3

<p class="scroll">

    <span>这里是要现实的滚动内容......</span>

 </p>

  • css部分

1

2

3

4

5

6

7

8

9

10

11

.scroll {

  width: 400px;

  height: 23px;

  white-space: nowrap;

  overflow: hidden;

  margin-left: 40px;

  position: relative;

}

.scroll > span {

  position: absolute;

}

  • js部分

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

// 字幕滚动变量

var scrollTime = null

var LEN = 400 // 一个完整滚动条的长度

var x = 0

// 启动滚动定时器

function roll () {

  console.log('启动')

  var tag1 = document.querySelector('.scroll>span')

  var tag2 = tag1.nextSibling

  var fun = function () {

    tag1.style.left = x + 'px'

    tag2.style.left = (x + LEN) + 'px'

    x = x - 5

    if ((x + LEN) === 0) {

      x = 0

    }

  }

  if (scrollTime) {

    clearInterval(scrollTime)

  }

  scrollTime = setInterval(fun, 300)

}

// 绑定鼠标事件

function bindMouseEvent () {

  var el = document.querySelector('.scroll>span')

  var el2 = el.cloneNode(true)

  LEN = el.clientWidth + 100 // 动态修改滚动条的长度,避免文字过多重叠

  el2.style.left = (x + LEN) + 'px'

  el.parentElement.appendChild(el2)

  el.addEventListener('mouseenter', function (e) {

    clearInterval(scrollTime)

  })

  el.addEventListener('mouseleave', function (e) {

    roll()

  })

}

推荐学习:《javascript高级教程

以上就是Javascript怎么实现字幕滚动的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html页面自动清理js、css文件的缓存(自动添加版本号)_html/xhtml_网页制作

检测javascript里最有效率的功能特征的方法解析

vue和js区别是什么

js中for…in和for…of之间有什么区别

javascript怎么设置select选中

javascript charat()方法是什么

javascript的math方法有哪些

render函数生成图片弹窗的代码示例

javascript面向对象的三个基本特征介绍

javascript中generator函数的详理解

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...