JQuery 弹幕可上下左右

水平弹幕，可设置向左、向右

containerId为显示弹幕容器ID, message弹幕内容, direction弹幕移动方向

// Jquery指定容器 向左或向右弹幕function sendBarrage_horizontal(containerId, message, direction) {// ===========第1部分,设置并挂载元素=========================// 定义弹幕元素，设置display:inline-block目的是获取内容实际的宽度var $barrage = $('<div class="barrage" style="display:inline-block"></div>');// 将弹幕内容放到元素中$barrage.text(message);// 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置$('#' + containerId).append($barrage);$('#' + containerId).css({ position: 'relative', overflow: 'hidden' });// ==========================================// ===========第2部分，显示高度位置及颜色=========================// 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置var containerHeight = $('#' + containerId).outerHeight();var barrageHeight = $barrage.outerHeight();// 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置var containerWidth = $('#' + containerId).outerWidth();var barragewidth = $barrage.outerWidth();// 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度var top =Math.floor(Math.random() * (containerHeight - barrageHeight)) + 'px';// 随机颜色var color = '#' + Math.floor(Math.random() * 16777215).toString(16);$barrage.css({top: top,color: color,position: 'absolute','white-space': 'nowrap',});// ==========================================// ===========第3部分，显示移动方向位置及颜色=========================// 从右侧开始向左移动if (direction == 'left' || direction == '') {$barrage.css({left: containerWidth,}).animate({ left: -barragewidth }, 10000, function () {$(this).remove();});}// 从左侧开始向右移动if (direction == 'right') {$barrage.css({left: -barragewidth,}).animate({ left: containerWidth }, 10000, function () {$(this).remove();});}}

垂直弹幕，可设置向上、向下

containerId为显示弹幕容器ID, message弹幕内容, direction弹幕移动方向

 // Jquery指定容器 向上或向下弹幕function sendBarrage_vertical(containerId, message, direction) {// ===========第1部分,设置并挂载元素=========================// 定义弹幕元素，设置writing-mode: vertical-rl;目的是设置显示问垂直方向var $barrage = $('<div class="barrage" style="writing-mode: vertical-rl;"></div>');// 将弹幕内容放到元素中$barrage.text(message);// 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置$('#' + containerId).append($barrage);$('#' + containerId).css({ position: 'relative', overflow: 'hidden' });// ==========================================// ===========第2部分，显示高度位置及颜色=========================// 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置var containerHeight = $('#' + containerId).outerHeight();var barrageHeight = $barrage.outerHeight();// 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置var containerWidth = $('#' + containerId).outerWidth();var barragewidth = $barrage.outerWidth();// 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度var left =Math.floor(Math.random() * (containerWidth - barragewidth)) + 'px';// 随机颜色var color = '#' + Math.floor(Math.random() * 16777215).toString(16);$barrage.css({left: left,color: color,position: 'absolute','white-space': 'nowrap',});// ==========================================// ===========第3部分，显示移动方向位置及颜色=========================// 从右侧开始向下移动if (direction == 'down' || direction == '') {$barrage.css({top: -barrageHeight,}).animate({ top: containerHeight }, 10000, function () {$(this).remove();});}// 从左侧开始向上移动if (direction == 'up') {$barrage.css({top: containerHeight,}).animate({ top: -barrageHeight }, 10000, function () {$(this).remove();});}}

标题完整示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><style>#barrage-container {width: 50%;height: 200px;margin-left: 200px;border: 1px solid red;}</style></head><body><div id="barrage-container"></div><inputtype="text"id="barrage-input"title="弹幕"/><button id="send-barrage-right">向右移动-发送</button><button id="send-barrage-left">向左移动-发送</button><button id="send-barrage-up">向上移动-发送</button><button id="send-barrage-down">向左下移动-发送</button><scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"type="text/javascript"></script><!--自定义的JS代码--><script type="text/javascript">$(document).ready(function () {$('#send-barrage-right').click(function () {var message = $('#barrage-input').val();sendBarrage_horizontal('barrage-container', message, 'right');});$('#send-barrage-left').click(function () {var message = $('#barrage-input').val();sendBarrage_horizontal('barrage-container', message, 'left');});$('#send-barrage-up').click(function () {var message = $('#barrage-input').val();sendBarrage_vertical('barrage-container', message, 'up');});$('#send-barrage-down').click(function () {var message = $('#barrage-input').val();sendBarrage_vertical('barrage-container', message, 'down');});});// Jquery指定容器 向左或向右弹幕function sendBarrage_horizontal(containerId, message, direction) {// ===========第1部分,设置并挂载元素=========================// 定义弹幕元素，设置display:inline-block目的是获取内容实际的宽度var $barrage = $('<div class="barrage" style="display:inline-block"></div>');// 将弹幕内容放到元素中$barrage.text(message);// 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置$('#' + containerId).append($barrage);$('#' + containerId).css({ position: 'relative', overflow: 'hidden' });// ==========================================// ===========第2部分，显示高度位置及颜色=========================// 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置var containerHeight = $('#' + containerId).outerHeight();var barrageHeight = $barrage.outerHeight();// 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置var containerWidth = $('#' + containerId).outerWidth();var barragewidth = $barrage.outerWidth();// 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度var top =Math.floor(Math.random() * (containerHeight - barrageHeight)) + 'px';// 随机颜色var color = '#' + Math.floor(Math.random() * 16777215).toString(16);$barrage.css({top: top,color: color,position: 'absolute','white-space': 'nowrap',});// ==========================================// ===========第3部分，显示移动方向位置及颜色=========================// 从右侧开始向左移动if (direction == 'left' || direction == '') {$barrage.css({left: containerWidth,}).animate({ left: -barragewidth }, 10000, function () {$(this).remove();});}// 从左侧开始向右移动if (direction == 'right') {$barrage.css({left: -barragewidth,}).animate({ left: containerWidth }, 10000, function () {$(this).remove();});}}// Jquery指定容器 向上或向下弹幕function sendBarrage_vertical(containerId, message, direction) {// ===========第1部分,设置并挂载元素=========================// 定义弹幕元素，设置writing-mode: vertical-rl;目的是设置显示问垂直方向var $barrage = $('<div class="barrage" style="writing-mode: vertical-rl;"></div>');// 将弹幕内容放到元素中$barrage.text(message);// 将弹幕元素挂载到指定显示容器中,并设置容器，超过自动隐藏及相对位置$('#' + containerId).append($barrage);$('#' + containerId).css({ position: 'relative', overflow: 'hidden' });// ==========================================// ===========第2部分，显示高度位置及颜色=========================// 获取容器高度、弹幕元素高度，用于计算弹幕的上下偏移位置var containerHeight = $('#' + containerId).outerHeight();var barrageHeight = $barrage.outerHeight();// 获取容器宽度、弹幕元素宽度，用于计算弹幕开始显示的位置，结束显示的位置var containerWidth = $('#' + containerId).outerWidth();var barragewidth = $barrage.outerWidth();// 用于根据容器及弹幕元素的高度生成弹幕元素在容器显示时的位置高度var left =Math.floor(Math.random() * (containerWidth - barragewidth)) + 'px';// 随机颜色var color = '#' + Math.floor(Math.random() * 16777215).toString(16);$barrage.css({left: left,color: color,position: 'absolute','white-space': 'nowrap',});// ==========================================// ===========第3部分，显示移动方向位置及颜色=========================// 从右侧开始向下移动if (direction == 'down' || direction == '') {$barrage.css({top: -barrageHeight,}).animate({ top: containerHeight }, 10000, function () {$(this).remove();});}// 从左侧开始向上移动if (direction == 'up') {$barrage.css({top: containerHeight,}).animate({ top: -barrageHeight }, 10000, function () {$(this).remove();});}}</script></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/50900.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

23.jdk源码阅读之Thread(下)

23.jdk源码阅读之Thread(下)

1. 写在前面 上篇文章我们介绍了Tread的一些方法的底层代码实现&#xff0c;这篇文章我们继续。 2. join()方法的底层实现 /*** Waits at most {code millis} milliseconds for this thread to* die. A timeout of {code 0} means to wait forever.** <p> This impleme…
阅读更多...
【java】【springboot】启动方法注解详解

【java】【springboot】启动方法注解详解

在Spring Boot中&#xff0c;启动方法通常是main方法&#xff0c;它位于应用程序的主类中&#xff0c;负责启动Spring应用上下文。 一、SpringBootApplication SpringBootApplication 是 Spring Boot 中一个非常核心的注解&#xff0c;它是一个复合注解&#xff0c;包含了三个…
阅读更多...
从工艺到性能：模具3D打印材料不断革新

从工艺到性能：模具3D打印材料不断革新

在模具3D打印领域&#xff0c;材料性能的持续优化与创新是推动模具3D打印的关键因素&#xff0c;近年来&#xff0c;各种3D打印新材料不断涌现&#xff0c;模具3D打印材料也开始重工艺导向逐步向性能导向发展&#xff0c;如毅速公司推出的ESU-EM191/191S及ESU-EM201不锈钢粉末、…
阅读更多...
电脑文件误删除如何恢复？数据恢复第一步是什么？这五点要第一时间处理！

电脑文件误删除如何恢复？数据恢复第一步是什么？这五点要第一时间处理！

电脑文件误删除如何恢复&#xff1f;数据删除恢复的第一时间要做什么&#xff0c;你知道吗&#xff1f; 在使用电脑的过程中&#xff0c;误删除重要文件的情况时有发生。面对这种情况&#xff0c;不必过于慌张&#xff0c;因为有多种方法可以帮助你恢复误删除的文件。以下是恢复…
阅读更多...
网络通信---UDP

网络通信---UDP

前两天做了个mplayer项目&#xff0c;今日继续学习 网络内容十分重要&#xff01;&#xff01;&#xff01; 1.OSI七层模型 应用层:要传输的数据信息&#xff0c;如文件传输&#xff0c;电子邮件等&#xff08;最接近用户&#xff0c;看传输的内容类型到底是什么&#xff09; …
阅读更多...
24年第三届钉钉杯大学生大数据挑战赛

24年第三届钉钉杯大学生大数据挑战赛

阅读更多...
香橙派orangepi系统没有apt，也没有apt-get，也没有yum命令，找不到apt、apt-get、yum的Linux系统

香橙派orangepi系统没有apt，也没有apt-get，也没有yum命令，找不到apt、apt-get、yum的Linux系统

以下是一个关于如何在 Orange Pi 上的 Arch Linux 系统中发现缺失包管理器的问题并解决的详细教程。 发现问题 确认系统类型&#xff1a; 使用以下命令检查当前的 Linux 发行版&#xff1a; uname -a cat /etc/os-release如果你看到类似于 “Arch Linux” 的信息&#xff0c;说…
阅读更多...
【数据结构与算法】顺序表

【数据结构与算法】顺序表

顺序表 一.顺序表的原理1.是什么2.数据结构 二.顺序表的初始化三.顺序表增加元素四.顺序表插入元素五.顺序表删除元素六.顺序表的销毁七.总结 一.顺序表的原理 1.是什么 顺序表是一种线性的结构,类似于数组,但是中间不能有空值. 元素顺序地存储在一段连续的内存空间中. 顺序表…
阅读更多...
单关节电机动力学辨识

单关节电机动力学辨识

这是一个单关节电机的动力学辨识过程&#xff0c;这是一个yaw轴转动电机的动力学辨识过程 1、动力学建模 &#xff08;1&#xff09;整体动力学 F J α f F J\alpha f FJαf 单关节的物理量包括惯性项、离心力和科氏力、摩擦力。这里忽略离心力和科氏力&#xff0c;据说…
阅读更多...
SolidEdge二次开发(C#)-环境配置

SolidEdge二次开发(C#)-环境配置

文章目录 1、前言2、环境配置2.1 安装Solidworks20242.2 安装VS20222.3 查看Com组件2.3.1 在VS2022中创建一个wpf工程项目2.3.2 添加com组件 1、前言 SolidEdge是Siemens PLM Software公司旗下的三维CAD软件&#xff0c;采用Siemens PLM Software公司自己拥有专利的Parasolid作…
阅读更多...
使用Java和Spring Retry实现重试机制

使用Java和Spring Retry实现重试机制

使用Java和Spring Retry实现重试机制 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将探讨如何在Java中使用Spring Retry来实现重试机制。重试机制在处理临时性故障和提高系统稳…
阅读更多...
Pandas筛选数据的10种方法

Pandas筛选数据的10种方法

Pandas是Python中用于数据操作和分析的强大库之一.它提供了丰富的功能来处理和筛选数据.本文将介绍Pandas中筛选数据的10种常用方法,并通过示例展示具体操作步骤. 1. 基于条件筛选 Pandas支持通过布尔索引根据条件筛选数据.这是最常用的筛选方法之一. import pandas as pd# …
阅读更多...
2679. 矩阵中的和

2679. 矩阵中的和

两种方法&#xff1a; 第一种&#xff1a;先对二维列表的每一列进行排序&#xff0c;然后对每一列的数据进行逐个比较&#xff0c;找出最大值。 class Solution:def matrixSum(self, nums: list[list[int]]) -> int:result0mlen(nums)nlen(nums[0])for i in range(m):nums…
阅读更多...
js动画插件-vue

js动画插件-vue

分享一个动画插件 学习 动画插件 是进入大厂的必备技能 首先我们需要先学会 去使用js 动画 封装好的 GreenSock 动画平台 &#xff08;GSAP&#xff09; greensock.com/gsap/ 就是这个插件 我现在分享一个用例 其实很简单 但是 具体的属性 和很多 内容需要慢慢使用 慢慢看…
阅读更多...
C++客户端Qt开发——系统相关（文件操作）

C++客户端Qt开发——系统相关（文件操作）

2.文件操作 ①输入输出设备类 在Qt中&#xff0c;文件读写的类为QFile。QFile的父类为QFileDevice,QFileDevice提供了文件交互操作的底层功能。QFileDevice的父类是QIODevice,QIODevice的父类为QObject。 QIODevice是Qt中所有输入输出设备(input/output device,简称I/O设备)…
阅读更多...
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 环形字符串最长子串(200分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 环形字符串最长子串(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录，全、新、准，题目覆盖率达 95% 以上，支持题目在线…
阅读更多...
响应式原理实现(2)vue2和vue3

响应式原理实现(2)vue2和vue3

响应式2 vue2响应式实现 提供shallow&#xff0c;决定是否需要深度响应 /*******************新增 shallow*******************/ export function defineReactive(obj, key, val, shallow) { /****************************************************/const property Object…
阅读更多...
【React】useState：状态管理的基石

【React】useState：状态管理的基石

文章目录 一、什么是 useState&#xff1f;二、useState 的基本用法三、useState 的工作原理四、高级用法五、最佳实践 在现代前端开发中&#xff0c;React 是一个非常流行的库&#xff0c;而 useState 是 React 中最重要的 Hook 之一。useState 使得函数组件能够拥有自己的状态…
阅读更多...
【Nodejs基础06】Node.js常用命令总结

【Nodejs基础06】Node.js常用命令总结

执行JS文件&#xff1a;node xx 初始化package.json: npm init -y&#xff08;所在文件夹不能有中文或特殊符号&#xff09; 下载本地软件包&#xff1a;npm i 软件包名&#xff08;软件包源码全部集成在node_modules文件夹中&#xff09; 下载全局软件包&#xff1a;npm i …
阅读更多...
深入理解synchronized(简记)

深入理解synchronized(简记)

深入理解synchronized 管程synchronized对象的内存布局锁状态记录锁对象状态转换偏向锁轻量级锁锁对象转换总结 管程synchronized Java 参考了 MESA 模型&#xff0c;语言内置的管程&#xff08;synchronized&#xff09;对 MESA 模型进行了精简。 对象的内存布局 对象头 Mar…
阅读更多...
最新文章

Copyright @ 2022~2023