借助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实现弹幕效果的更多相关文章
- marquee标签弹幕效果
播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...
- 又一枚精彩的弹幕效果jQuery实现
精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下 简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random ...
- iframe框架里镶嵌页面;<marquee>:滚动效果;<mark>做标记;内联、内嵌、外联;选择器
标签:①②③④⑤⑥⑦★ 框架: 一.frameset:(框架集) 1.如果使用框架集,当前页面不能有body 2.cols="300,*":左右拆分,左边宽300,右边宽剩余 3. ...
- android 弹幕效果demo
记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...
- Android 自定义View修炼-自定义弹幕效果View
一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...
- Android:简单的弹幕效果达到
首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- h5做直播的弹幕效果
最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...
随机推荐
- windows下遍历文件夹下的文件
#include <io.h>#include <stdio.h>#include <iostream>using namespace std;int ReadSt ...
- qa角色记一次测试过程回溯
一.测试过程简述 a项目依赖b项目新功能,ab项目一起提测 1.测试人员:两老一新 2.测试过程:第一轮,三人执行用例 第二轮,三人各自模块发散 第三轮,三人交叉测试 第四轮,两老投入b项目性能以及接 ...
- 【CF1181C】Flag
题目大意:给定一个 N*M 的矩阵,定义一个矩形区域为一个"国旗",满足:矩形区域可以按行划分成三个高度相同的部分,其中每一个部分中的颜色完全相同,第一部分的颜色与第二部分颜色不同 ...
- 并发编程的锁机制:synchronized和lock
1. 锁的种类 锁的种类有很多,包括:自旋锁.自旋锁的其他种类.阻塞锁.可重入锁.读写锁.互斥锁.悲观锁.乐观锁.公平锁.可重入锁等等,其余就不列出了.我们重点看如下几种:可重入锁.读写锁.可中断锁. ...
- 问题-CHM文件不显示
原问题:http://bbs.csdn.net/topics/370230310 问题描述: http://download.csdn.net/download/wybneu/3582721 我从这个 ...
- python之爬取网页数据总结(一)
今天尝试使用python,爬取网页数据.因为python是新安装好的,所以要正常运行爬取数据的代码需要提前安装插件.分别为requests Beautifulsoup4 lxml 三个插件 ...
- 前端js之JQuery
目录 jQuery介绍 jQuery的优势 jQuery内容 jQuery对象 jQuery基础语法结构 jQuery 使用注意事项 查找标签 基本选择器 层级选择器 基本选择器 属性选择器 表单筛选 ...
- cursor(鼠标手型)属性
㈠简单介绍 在浏览网页时,通常看到的鼠标光标形状有箭头.手形.沙漏等,而在 windows 中实际看到的鼠标指针种类比这个还要多. 一般情况下,鼠标光标的形状由浏览器负责控制,大多数情况的光标形状为箭 ...
- java8 base64编码和解码
package com.oy; import java.nio.charset.StandardCharsets; import java.util.Base64; import org.junit. ...
- PHP基础回顾
变量:声明变量以$开始,变量名可以用中文但是不要用:不能使用特殊字符,比如@,下划线除外:变量名区分大小写.可变变量 $a = b; $b = c; => $$a = c; 理论上$可以无限使 ...