HTML标签marquee实现滚动效果

.基于此,实现简易版 弹幕:

 HTML

<div class="right_liuyan">
<marquee id="liuyan" scrollAmount=2 width=200 height=300 direction=up >
<div class="danmu">
<p>竟然还有文字识别!!!</p>
</div>
<br /> <div class="danmu">
<p>这家网店的书就是好</p>
</div>
<br /> <div class="danmu">
<p>为啥都是计算机的书?</p>
</div>
<br /> <div class="danmu">
<p>还有手机版!!!!!!还有手机版!!!!!</p>
</div>
<br /> </marquee> <input id="dan_input" type="text" value="">
<button onclick="return addDanMu()">添加弹幕</button> </div>

主要CSS

.danmu{
background-color:rgb(231, 231, 231);
border-radius:10px;
font-size:15px;
padding:10px 15px;
}

弹幕发送功能

另一篇博客:https://www.cnblogs.com/expedition/p/11335328.html

借助marquee实现弹幕效果的更多相关文章

  1. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  2. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  3. iframe框架里镶嵌页面;<marquee>:滚动效果;<mark>做标记;内联、内嵌、外联;选择器

    标签:①②③④⑤⑥⑦★ 框架: 一.frameset:(框架集) 1.如果使用框架集,当前页面不能有body 2.cols="300,*":左右拆分,左边宽300,右边宽剩余 3. ...

  4. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

  5. Android 自定义View修炼-自定义弹幕效果View

    一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...

  6. Android:简单的弹幕效果达到

    首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...

  7. Android弹幕功能实现,模仿斗鱼直播的弹幕效果

    转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...

  8. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  9. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

随机推荐

  1. 关于join

  2. jar启动名称示例

    nohup java -jar -Dspring.profiles.active=20dev -XX:+PrintGCDetails -XX:+PrintGCTimeStamps -XX:+Print ...

  3. char()和VARCHAR()的主要区别是什么?

    1.char的长度是不可变的,而varchar的长度是可变的 字段b:类型char(10),     值为:abc,存储为:abc             (abc+7个空格) 字段d:类型varch ...

  4. 【leetcode】745. Prefix and Suffix Search

    题目如下: Given many words, words[i] has weight i. Design a class WordFilter that supports one function, ...

  5. C# 3.0

    序言 自动实现的属性 匿名类型 查询表达式 Lambda 表达式 从 C# 3 开始,lambda 表达式提供了一种更简洁和富有表现力的方式来创建匿名函数. 使用 => 运算符构造 lambda ...

  6. CodeForces 557C Arthur and Table STL的使用

    题意:一个桌子有n条腿,每条腿有一定的长度l,和砍下的花费w,现在规定,桌子稳的条件是长度最长的腿(可多个)的数量大于长度小于它的桌子腿数量,且不存在比他还长的桌子腿,求让桌子腿稳定的最小的花费 #i ...

  7. 【UOJ #46】 【清华集训2014】玄学

    题目描述 巨酱有 n 副耳机,他把它们摆成了一列,并且由 1 到n依次编号.每个耳机有一个玄学值,反映了各自的一些不可名状的独特性能.玄学值都是 0 到 m-1 间的整数.在外界的作用下(包括但不限于 ...

  8. PX4学习之-uORB msg 自动生成模板解读

    最后更新日期 2019-06-22 一.前言 在 PX4学习之-uORB简单体验 中指出, 使用 uORB 进行通信的第一步是新建 msg.在实际编译过程中,新建的 msg 会转换成对应的 .h..c ...

  9. Android_(游戏)打飞机02:游戏背景滚动

    (游戏)打飞机01:前言 传送门 (游戏)打飞机02:游戏背景滚动 传送门 (游戏)打飞机03:控制玩家飞机 传送门 (游戏)打飞机04:绘画敌机.添加子弹   传送门 (游戏)打飞机05:处理子弹, ...

  10. Babel编辑ES6代码

    1.安装babel依赖 npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babe ...