JavaScript实现弹幕效果

最新推荐文章于 2023-10-10 09:29:47 发布

空谷丶幽兰

最新推荐文章于 2023-10-10 09:29:47 发布

阅读量719

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/103127983

版权

实现效果：

  1. 输入内容单击发表就会在浏览器页面上实现内容从左到右的动画效果
  2. 每发表一个内容，运动到最后都要清除标签元素以防浏览器崩溃
  3. 发表的每个内容都会随机产生高度，随机产生颜色（颜色是给出的）

实现过程：

1.创建span标签
2.将input标签的内容赋给span标签
3.让span标签成为页面的子元素
4.设置span标签的位置为页面显示可见区域的右边，随机产生值为上下位置
5.设置一个num值初始等于页面可见区域右边的值，创建一个计时器，然后num--，页面左移，来实现文字的滚动
6.文字到达页面可见区域左端，清除这个元素，
7.将这些内容放在onclick事件中，每次点击都是如此

实现细节：

    1.document.createElement()用来创建一个元素。
    2.网页可见区域宽：document.body.clientWidth
      //网页可见区域高：document.body.clientHeight
      //网页可见区域宽：document.body.offsetWidth (包括边线的宽)
      //网页可见区域高：document.body.offsetHeight (包括边线的宽)
    3.Math.random() 取[0,1)的随机小数
      //Math.round()四舍五入
      //Math.ceil()和Math.floor()分别向上取整向下取整。

代码：


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            html, body {
   
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;
            }
            
            .boxDom {
   
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            }

最低0.47元/天解锁文章

空谷丶幽兰

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现弹幕效果

实现效果： 1. 输入内容单击发表就会在浏览器页面上实现内容从左到右的动画效果 2. 每发表一个内容，运动到最后都要清除标签元素以防浏览器崩溃 3. 发表的每个内容都会随机产生高度，随机产生颜色（颜色是给出的）实现过程：1.创建span标签2.将input标签的内容赋给span标签3.让span标签成为页面的子元素4.设置span标签的位置为页面显示可见区域的右边，随机产生...
复制链接

扫一扫