每隔一段时间 文字的滚动

最新推荐文章于 2025-08-19 08:41:01 发布
最新推荐文章于 2025-08-19 08:41:01 发布
阅读量1.5k 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript div float class xhtml string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yuezaiziye/article/details/7269669
此博客展示了一个包含公告和滚动图片的网页布局，通过JavaScript实现左右箭头滚动效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
 
 
<script language="javaScript" src="scrollpic.js" charset="utf-8"></script>
<script language="javaScript" src="jquery_last.js" charset="utf-8"></script>
 
 <style type="text/css">
 .pic_top div{float:left}
    .pic_yi{height:80px; width:87px;vertical-align:middle;}
    .pic_center a{color:#173969;font-size:12px;}
    .pic_center img{margin-left:18px}
    </style>
   
 <style type="text/css">
    .text_top div{float:left}
    .text_yi{height:80px;_height:35px; width:600px;padding-top:1px}
    </style>
 
 
 
</head>
 
<body  >
 
 
 
<!-- 上左 -->
    <div class="text_top" style="float:left;height:34px;line-height:34px;width:700px;border:1px solid #DDDDDD;background-color:#F5F5F5;margin-top:10px;">
       <div style="float:left"><strong><font style="font-size: 15px;">&nbsp;&nbsp;&nbsp;公告:</font></strong>
       </div>
       <div class="pic_center" id="divAcrollPic2" style=" overflow:hidden; font-size:12px;color:#999999;">
     <div class="text_yi"><font style="font-size: 12px;"color="#555555">&nbsp;&nbsp;<a href="https://www.bestpay.com.cn/LeftFeeIndex/LeftAppIndex.html" style="color: #555555" target="_blank">最新开通济南、重庆、宁波、上海金山缴水费，更多城市陆续开通中...</a></font>
     </div>
     <div class="text_yi"><font style="font-size: 12px;"color="#555555">&nbsp;&nbsp;<a href="https://www.bestpay.com.cn/news/newsDetail.html?newId=1332" style="color: #555555" target="_blank">广东地区“翼支付惊喜大放送”手机客户端话费充值返利活动结束公告</a></font>
     </div>  
       </div>
       <div  id="Leftpic" style="cursor: pointer;width:19px;height:100%;margin-top:7px;_margin-top:3px;"><img id="img1" src="../images/new/left1.jpg"  />
       </div>
    <div  id="Rightpic" style="cursor: pointer;width:19px;height:100%;margin-top:7px;_margin-top:3px;"><img id="img2" src="../images/new/right1.jpg"  />
    </div>

<script type="text/javascript">
// 左右点击滚动开始
var scrollPic1 = new ScrollPic();
scrollPic1.scrollContId   = "divAcrollPic2"; //内容容器ID
scrollPic1.arrLeftId      = "Leftpic";//左箭头ID
scrollPic1.arrRightId     = "Rightpic"; //右箭头ID
 
scrollPic1.frameWidth     = 600;//显示框宽度
scrollPic1.pageWidth      = 600; //翻页宽度
 
scrollPic1.speed          = 9; //移动速度(单位毫秒，越小越快)
scrollPic1.space          = 90; //每次移动像素(单位px，越大越快)
scrollPic1.autoPlay       = true; //自动播放
scrollPic1.autoPlayTime   =0; //自动播放间隔时间(秒)
 
scrollPic1.initialize(); //初始化
// 左右点击滚动结束
</script>

</body>
</html>

 

aggier
关注
文本向上滚动可指定间隔时间
weixin_34353714的博客
07-30 194
2019独角兽企业重金招聘Python工程师标准>>> ...
vue或jquer+setInterval 定时器实现 数字滚动显示效果
weixin_44959182的博客
10-20 856
今天一个项目需要用的数字滚动显示效果，本想着省事情去百度一下可是却没有想要的代码。就算是有对于大部分小白来说也不不容易看懂。于是就自己写下了分vue和jquer的代码希望对大家有帮助。 在这里插播一个setInterval和setTimeout相关的小知识点 setInterval(() => {}, 1000)//setInterval方法此处作用是每隔1秒执行1次定义的事件 setTimeout(() => {}, 1000)//setTimeout方法此处作用是隔1秒后执行1次..
JS文字间隔性滚动代码/文字左右滚动
iminger的专栏
05-20 1523
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">JS文字间隔性滚动代码--------------文字左右滚动body{ font-size:12px;}#shangfan{font-family: 新宋体, 宋体, 仿宋_GB2312;font-size: 12px;
文字滚动
weixin_30920853的博客
12-24 80
　　实现滚动文字的特效，主要是在页面中应用<marquee></marquee>标签。主要属性： align：滚动内容的对齐方式：top、middle和bottom direction：滚动的方向：up、down、left和right behavior：滚动的方式：scroll（循环滚动）、slide（一次滚动）和altermate（交替滚动） loop：循环滚动的...
JS 有时间间隔的文字滚动
iteye_8029的博客
02-26 189
&lt;head&gt; &lt;style type="text/css"&gt; *{margin:0;padding:0;} ul,li{list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-serif;} a{color:#333;text-decoration:none;} a:hover{colo...
html打开网页一段时间字幕滚动,网页代码:求一个隔段时间可停顿的滚动字幕代码...
weixin_39582724的博客
05-31 415
JS滚动字幕文字新法我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上面)，一般情况下只要不是图片，都是用HTML本身就有提供一个很不错的滚动标记——marquee来完成的(用JS也可以同样实现这种效果)；当然并不是说图片就不能那样做。以下为marquee的一些基本的参数：该标记语法格式如下：aligh=left|center|right|top|bottombgcolor=#ndire...
html怎么让一行文字有滚动的效果,HTML标签marquee实现滚动效果
weixin_39929566的博客
06-03 1562
html标签 - 可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.只需要在内部输入要滚动的内容即可。一、标签属性1.滚动方向direction(包括4个值：up、 down、 left和 right)语法：...2.滚动方式behavior(scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动)...
前端实现文字滚动（支持横向、纵向）
小太阳的博客
08-02 2094
1.首先安装dayjs插件（后面唯一id使用） day.js–一个轻量的处理时间和日期的JavaScript库 npm install dayjs --save 2.在main.js中引入dayjs插件插件 import dayjs from 'dayjs'; Vue.prototype.$dayjs = dayjs; 3.滚动组件 <template> <div :id="id" class="marquee-wrapper"> <span
1.js基础实现文字滚动效果
m0_62738279的博客
07-18 179
【代码】1.js基础实现文字滚动效果。
易语言源码实现无限多的文字滚动.7z
05-13
在这个“易语言源码实现无限多的文字滚动”项目中，我们可以推测这是一段代码，用于在界面上动态展示滚动的文字，可能是为了创建类似公告、提示或者滚动字幕的效果。下面我们将详细探讨这个主题。 首先，我们需要...
跑马灯特效--文字滚动
11-23
例如，使用`setInterval`函数每间隔一定时间更新文字的位置，通过调整时间间隔来改变滚动速度。 四、优化与兼容性 为了保证在不同浏览器和设备上的良好体验，我们需要考虑兼容性和性能优化。使用CSS3的`animation`...
文字自动滚动效果_俗称：文字跑马灯效果
02-21
这段代码会在文档加载完成后启动一个定时器，每隔10毫秒改变文本的左边距，模拟滚动效果。 4. **现代Web组件和框架**：在React、Vue或Angular等现代前端框架中，也可以创建自定义组件来实现跑马灯效果，利用框架...
JS实现排行榜文字向上滚动轮播效果
10-15
标签中的“js排行榜文字向上滚动轮播”、“js文字向上滚动”和“js文字滚动轮播”进一步明确了这个话题的核心，即使用JavaScript来实现文字的向上滚动轮播功能。 以下是对这段代码的详细解析： 1. HTML结构： ...
js文字滚动一次一行特效,类似抽奖公告
12-03
// 每隔一定时间执行滚动 setInterval(scrollText, 50); ``` 这段代码首先获取了`scrolling-text`元素，并存储了其文本内容。然后定义了一个函数`scrollText`，这个函数会逐个字符地移动文字，同时通过改变`span`...
JavaScript 核心基础：类型检测、DOM 操作与事件处理
热爱音乐和二次元！
08-15 1354
本文系统梳理 JavaScript 核心知识点，包括数据类型检测规则、遍历方式、DOM操作和事件处理。重点解析 typeof 运算符对不同数据类型的检测结果，数组与对象的遍历方法差异，以及使用 querySelector 获取元素的现代方案。同时详细讲解事件绑定的两种方式（onclick 覆盖 vs addEventListener 多播）和事件冒泡机制，帮助开发者构建扎实的 JS 基础，写出更健壮的代码。
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法
最新发布
张先森的博客
08-19 295
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。
js实现一段文字无缝滚动
01-20
### 使用 JavaScript 实现文本平滑无限循环滚动 为了创建一个具有平滑无限循环滚动效果的文字展示区，可以采用多种方法。一种常见的方式是利用 `setInterval` 函数来定时调整元素的位置属性，配合 CSS 的过渡效果使移动看起来更加自然[^1]。 下面是一个简单的例子，它通过改变容器内子项的定位样式来进行上下方向上的连续滚动： ```html <div id="scroll-container"> <div class="content">这是一些要滚动显示的信息...</div> </div> <style> #scroll-container { height: 100px; /* 容器高度 */ overflow: hidden; } .content { transition: transform .5s ease-in-out; } </style> <script> let container = document.getElementById('scroll-container'); let content = container.querySelector('.content'); function scrollText() { let topPosition = parseFloat(window.getComputedStyle(content).getPropertyValue("transform").split(',')[5]); if (topPosition <= -content.offsetHeight + container.offsetHeight) { // 当内容完全移出视口时重置位置 content.style.transform = 'translateY(0)'; } else { content.style.transform = `translateY(${topPosition - 2}px)`; // 向下微调像素数可自定义 } } // 设置间隔时间以控制速度 setInterval(scrollText, 30); </script> ``` 此段代码实现了基于浏览器窗口大小自动适应的高度设置，并且每当内容超出可见范围之后就会立即返回起始状态继续向下滚动，从而达到所谓的“无缝”体验。 对于更复杂的场景，比如水平滚动或是带有动画曲线的情况，则可能需要用到更多的 HTML/CSS/JS 技巧组合，甚至借助第三方库如 GSAP 来简化开发过程并增强性能表现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值