Js实现文字水平滚动

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量930 收藏 4
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43747105/article/details/103665867
版权
公司项目中有一个公告栏，写的时候我先想到了用marquee，于是发现了marquee有很多弊端，当文字全部显示完才出现新的文字，这样不是很友好，然后一查发现marquee这个标签已经被W3C标准废弃了，也就是不再支持使用这个标签了，于是我便用js+css去替代这个写法，并且做到类似无缝滚动的效果。直接上代码：html代码<div id="scroll_div" class="fl...
摘要由CSDN通过智能技术生成

公司项目中有一个公告栏，写的时候我先想到了用marquee，于是发现了marquee有很多弊端，当文字全部显示完才出现新的文字，这样不是很友好，然后一查发现marquee这个标签已经被W3C标准废弃了，也就是不再支持使用这个标签了，于是我便用js+css去替代这个写法，并且做到类似无缝滚动的效果。直接上代码：

html代码:

<div id="scroll_div" class="fl">
	<div id="scroll_begin">
		<span class="pad_right">这是第一条信息的内容这是第一条信息的内容这是第一条信息的内容</span>
		<span class="pad_right">这是第二条信息的内容这是第二条信息的内容这是第二条信息的内容</span>
最低0.47元/天 解锁文章
xiji666
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
水平滚动的有趣JavaScript效果
ZuqCloud的博客
09-27 66
一个受欢迎的效果是水平滚动，它可以让内容以水平方向连续滚动，给用户带来一种有趣的感觉。如果是，则将内容元素的位置重置为起始位置，并将其附加到容器元素的末尾，以实现无限循环滚动的效果。你可以将上述的HTML、CSS和JavaScript代码复制粘贴到一个HTML文件中，并在浏览器中打开该文件，即可看到水平滚动效果的实际效果。首先，让我们创建一个HTML结构，其中包含一个包裹内容的容器元素和一个需要水平滚动的内容元素。实现水平滚动的关键在于使用CSS和JavaScript来控制元素的位置和动画。
文字垂直水平循环滚动
qq_40930251的博客
03-30 293
父元素包裹时属性 overflow:hidden 水平：父元素设置了定位，子元素固定宽度，并且克隆子元素left父元素宽度 *{ padding: 0; margin: 0; } #demo { overflow: scroll; height: 200px; width: 600px; border: 1px solid #000; } #demo1 li { list-st...
js实现单行文字滚动
07-10
纯js实现单行文字滚动 无需任何js库支持 直接运行
ScrollTrigger：让您的页面对滚动更改做出React
02-03
滚动触发 让您的页面对滚动更改做出React。 ScrollTrigger的最基本用法是根据当前滚动位置触发类。 例如，当元素进入视口时，将其淡入。您可以为每个元素添加自定义偏移量，或在视口上设置偏移量（例如，始终在元素达到视口的20％之后触发） 使用回调时，ScrollTrigger变得非常强大。 当元素进入/可见时，您可以运行自定义代码，如果回调失败，甚至可以返回Promises来停止触发器。 这使得延迟加载图像非常容易。 安装 npm install @terwanerik/scrolltrigger或仅将dist/ScrollTrigger.min.js文件添加到您的项目中并导入。 如何使用？ 最简单的启动方法是创建一个新实例，并向其添加一些触发器以及所有默认值。 当元素进入视口时，这将切换“可见”类，当元素滚动出视口时，将切换“不可见”类。 // when using ES6 import / npm import ScrollTrigger from '@terwanerik/scrolltrigger' // Create a new ScrollTrigger
文字轮播_Js实现文字水平滚动
weixin_32339855的博客
01-14 1281
现在要实现的效果是，当一行文字超过页面的宽度，需要实现循环轮播的效果。我们需要实现无缝轮播，所以需要在DOM里面多添加一条，当第一条内容刚好结束的时候也就是第二条开始的时候，此时瞬间切换到第一条的开始位置。这样就可以无缝衔接了。"scroll-outer" class="scroll__outer"> <div id="scroll-inner" class="scroll...
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
mituan1234567的专栏
07-23 1178
http://www.jb51.net/article/23526.htm     xmlns="http://www.w3.org/1999/xhtml">     http-equiv="Content-Type" c />   无标题文档   type="text/css">
marquee图片/文字无缝滚动
liang0000zai的专栏
03-17 1258
先了解一下对象的几个的属性： innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:    设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:     设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:
JS文字水平滚动
qq_42954336的博客
08-13 5019
JS文字水平滚动 代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp
jquery版文字水平方向无限循环滚动.zip
07-02
标题中的“jquery版文字水平方向无限循环滚动”指的是一个基于jQuery实现的JavaScript特效，它使得文字能够在水平方向上持续、不间断地循环滚动。这个技术在网页设计中常用于展示新闻标题、广告语或者滚动公告等，能...
js 文字横向滚动
01-21
简单、实用的javascript文字横向滚动效果。
原生js实现水平方向无缝滚动
10-20
原生JavaScript实现水平方向无缝滚动是一种常见的网页动态效果，它可以使页面内容在水平方向上持续滚动，创造出一种无止境的视觉体验。这种效果通常用于显示新闻标题、滚动广告或者菜单项，使得有限的屏幕空间能展示...
js实现的文字横向无间断滚动
10-28
### JavaScript 实现文字横向无间断滚动 #### 一、需求背景 在Web开发中，有时需要实现一种视觉效果——让一段文字或一系列元素在页面上进行横向无间断滚动。这种效果常见于新闻网站、广告展示等场景，能够吸引...
实现网页内容水平或垂直滚动的Javascript代码
10-27
首先，我们来看一下基于JavaScript的水平滚动实现。代码的核心在于创建一个包含滚动内容的`div`元素，并通过JavaScript动态调整其`left`属性来实现滚动效果。以下是一个简单的例子： ```html ; overflow: hidden;">...
js控制文字水平无限滚动
weixin_46147758的博客
01-13 503
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="./plu/jquery-3.1.1...
无间断滚动marquee的详细用法解析（转）
热门推荐
寒色博客
02-19 1万+
无间断滚动marquee的详细用法解析记得前阵子有个朋友问我 无间断滚动我也忘记了我当时在做什么了随便上网拷了一段代码给他实现是可以实现 但是太麻烦了一大堆的代码 不静下心来是看不懂的  趁着 今天有空就来研究下 marquee 的终极用法嘿嘿 ```先看下 marquee 的html 属性　　BEHAVIOR="…"  　　BGCOLOR="…"  　　DIRECTION="…"  　　HE
超强的苹果官网滚动文字特效实现
weixin_47367099的博客
10-22 803
每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年的介绍页不例外。最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简单却不知从何下手，我们来看看：整个动画大致是，随着页面的向下滚动，整个文字从无到出现，再经历一轮渐变色的变化，最后再逐渐消失。本文，就将介绍 2 种使用 CSS 实现该效果的方式。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 350
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
JavaScript实现一行文字水平滚动
05-26
可以使用CSS3的动画属性实现一行文字水平滚动。具体实现如下： HTML代码： ``` 这是一行文字水平滚动的效果 ``` CSS代码： ``` .scrolling-text { white-space: nowrap; /* 禁止文字换行 */ overflow: hidden;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值