当前位置: 首页 > news >正文

js跑马灯效果、横向、纵向滚动效果

比如横向滚动,则在li标签里设置 display: table-cell;滚动效果 transform: translateX(-200px);

<div id="div1" ><ul><li><img src="imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src="imgs/Snipaste_2022-11-23_11-31-25.png"></li><li><img src="imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src="imgs/Snipaste_2022-11-23_11-31-25.png"></li><li><img src="imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src="imgs/Snipaste_2022-11-23_11-31-25.png"></li></ul>
</div><style>
#div1{overflow: hidden;position: absolute; width: 204px;height: 117px;left: 1px;top: 2px;border-radius: 8px;}#div1 ul{position: absolute;left:0;list-style: none;animation: marquee 13s linear infinite;}#div1 ul li{     padding: 1px;/* 纵向滚动 *//* display: inline; *//* 横向滚动 */display: table-cell;width: 202px;height: 117px;}#div1 ul li img{width: 202px;height: 117px;}@keyframes marquee{0% {}100% {/* 横向是translateX,纵向是translateY */transform: translateX(-200px);}
}
</style>

相关文章:

js跑马灯效果、横向、纵向滚动效果

比如横向滚动&#xff0c;则在li标签里设置 display: table-cell;滚动效果 transform: translateX(-200px); <div id"div1" ><ul><li><img src"imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src"i…...

C#基础(14)冒泡排序

前言 其实到上一节结构体我们就已经将c#的基础知识点大概讲完&#xff0c;接下来我们会讲解一些关于算法相关的东西。 我们一样来问一下gpt吧&#xff1a; Q:解释算法 A: 算法是一组有序的逻辑步骤&#xff0c;用于解决特定问题或执行特定任务。它可以是一个计算过程、一个…...

喜报 | 众数信科荣获2024年“火炬瞪羚企业”称号

近日&#xff0c;厦门火炬高新区公布2024年“火炬瞪羚企业”名单&#xff0c;众数&#xff08;厦门&#xff09;信息科技有限公司凭借在AI领域的综合实力、技术创新及典型场景应用等方面的卓越表现&#xff0c;成功入选。 瞪羚企业 一般指高成长性科技型企业&#xff0c;是跨过…...

中央企业数智化薪酬信息系统建设如何实现穿透式监管?

近年来&#xff0c;深化国有企业改革成为推动高质量发展的重要抓手&#xff0c;薪酬管理作为其中的关键领域&#xff0c;备受关注。国资委于近日发布了《关于加强中央企业薪酬管理信息系统建设的通知》&#xff0c;并召开了中央企业薪酬管理信息系统建设工作部署会议&#xff0…...

110Redis 简明教程--Redis 数据类型

Redis strings 字符串是一种最基本、最常用的 Redis 值类型。 Redis 字符串是二进制安全的&#xff0c;这意味着一个 Redis 字符串能包含任意类型的数据&#xff0c;例如&#xff1a; 一张经过 base64 编码的图片或者一个序列化的 Ruby 对象。通过这样的方式&#xff0c;Redis …...

Spring Data Rest 远程命令执行命令(CVE-2017-8046)

&#xff08;1&#xff09;访问 http://your-ip:8080/customers/1&#xff0c;然后抓取数据包&#xff0c;使用PATCH请求来修改 PATCH /customers/1 HTTP/1.1 Host: Accept-Encoding: gzip, deflate Accept: */* Accept-Language: en User-Agent: Mozilla/5.0 (compatible; MS…...

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-18

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-18 1. The Application of Large Language Models in Primary Healthcare Services and the Challenges W YAN, J HU, H ZENG, M LIU, W LIANG - Chinese General Practice, 2024 人工智能大语言模型在基层医疗…...

搜索算法:Fibonacci查找

### 什么是Fibonacci查找 Fibonacci查找是一种搜索算法&#xff0c;它结合了Fibonacci数列和二分查找的思想&#xff0c;用于在有序数组中查找目标值。它的主要优点是在某些情况下可以比普通二分查找更高效。 ### Fibonacci数列 Fibonacci数列是一个递归定义的数列&#xff0…...

软件验收测试报告有什么作用?第三方验收测试报告包括哪些内容?

在现代软件开发中&#xff0c;软件验收测试报告占据了极为重要的地位&#xff0c;不仅是软件交付过程中的一环&#xff0c;更是软件质量保障的关键工具。 软件验收测试报告是指在软件开发过程中&#xff0c;针对软件的功能、性能、安全等方面进行的一系列测试后&#xff0c;形…...

AI大模型教程 Prompt提示词工程 AI原生应用开发零基础入门到实战【2024超细超全,建议收藏】

在AGI&#xff08;通用人工智能&#xff09;时代&#xff0c;那些既精通AI技术、又具备编程能力和业务洞察力的复合型人才将成为最宝贵的资源。为此&#xff0c;我们提出了‘AI全栈工程师’这一概念&#xff0c;旨在更精准地描述这一复合型人才群体&#xff0c;而非过分夸大其词…...

Pinia的快捷使用方法

安装Pinia npm install pinia 在main.js里面引入并注册挂载使用 在src下创建一个store inex.js // index.js import { defineStore } from pinia import { computed, ref } from vue //更简洁的的模块化 transferringValuesBetweenComponents simulationModule //简单定义了…...

一文搞懂C++继承

一文搞懂C继承 1.继承的概念及定义1.1继承的概念1.2 继承定义1.2.1定义格式1.2.2继承关系和访问限定符1.2.3继承基类成员访问方式的变化 2.基类和派生类对象赋值转换3.继承中的作用域4.派生类的默认成员函数4.1 构造函数4.2 拷贝构造4.3 赋值重载4.4 析构函数 5.继承与友元6. 继…...

MFC -文件类控件

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解MFC中的文件类 MFC文件类 在MFC中&#xff0c;CFILE 是基本的文件操作类&#xff0c;提供了读取、写入、打开、关闭等操作方法主要成员函数:Open(用于打开文件&#xff0c;设置模式 例如 只读 只写 读…...

Hbase操作手册

一&#xff1a;Hbase 创建数据库表 1.进入hbase shell 2.创建数据库表的命令&#xff1a;create 表名, 列族名1,列族名2,列族名N 3.如果想查看所有数据库表&#xff0c;可以使用list 命令&#xff1a; 4.可以看到&#xff0c;刚创建的数据库表user 已经在数据库表的列表中&…...

vue组件($refs对象,动态组件,插槽,自定义指令)

一、ref 1.ref引用 每个vue组件实例上&#xff0c;都包含一个$refs对象&#xff0c;里面存储着对应dom元素或组件的引用。默认情况下&#xff0c;组件的$refs指向一个空对象。 2.使用ref获取dom元素的引用 <template><h3 ref"myh3">ref组件</h3&g…...

构建高可用和高防御力的云服务架构第五部分:PolarDB(5/5)

引言 云计算与数据库服务 云计算作为一种革命性的技术&#xff0c;已经深刻改变了信息技术行业的面貌。它通过提供按需分配的计算资源&#xff0c;使得数据存储、处理和分析变得更加灵活和高效。在云计算的众多服务中&#xff0c;数据库服务扮演着核心角色。数据库服务不仅负…...

QT窗口无法激活弹出问题排查记录

问题背景 问题环境 操作系统: 银河麒麟V10SP1qt版本 : 5.12.12 碰见了一个问题应用最小化,然后激活程序窗口无法弹出 这里描述一下代码的逻辑,使用QLocalServer实现一个单例进程,具体的功能就是在已存在一个程序A进程时,再启动这个程序A,新的程序A进程会被杀死,然后激活已存…...

node.js 版本管理

在Node.js开发中&#xff0c;版本管理是一个非常重要的环节&#xff0c;特别是当你需要同时维护多个项目&#xff0c;而这些项目又依赖于不同版本的Node.js时。以下是一些常用的Node.js版本管理工具和方法&#xff1a; 1. NVM (Node Version Manager) NVM是Node.js版本管理的…...

使用Python实现图形学曲线和曲面的NURBS算法

目录 使用Python实现图形学曲线和曲面的NURBS算法引言NURBS曲线的数学原理1. NURBS曲线定义2. 权重的作用 NURBS曲线的Python实现1. 类结构设计2. 代码实现3. 代码详解使用示例 NURBS曲面的扩展NURBS曲面类实现 总结 使用Python实现图形学曲线和曲面的NURBS算法 引言 NURBS&a…...

SpringBoot3

文章目录 一、为什么要学习SpringBoot二、SpringBoot介绍2.1 约定优于配置2.2 SpringBoot中的约定三、SpringBoot快速入门3.1 快速构建SpringBoot3.1.1 选择构建项目的类型3.1.2 项目的描述3.1.3 指定SpringBoot版本和需要的依赖3.1.4 导入依赖3.1.5 编写了Controller3.1.6 测试…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...