js实现文字列表无缝滚动效果

发布时间 - 2026-01-11 02:01:54    点击率:

本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下

HTML代码:

<div id="rule">
    <div class="list" id="list">
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
    </div>
  <div class="list2" id="list2"></div>
</div>

JavaScript代码

var speed=50;
var list=document.getElementById('list');
var list2=document.getElementById('list2');
var rule=document.getElementById('rule');
list2.innerHTML=list.innerHTML;
function Marquee(){
 if(list2.offsetTop-rule.scrollTop<=0)
  rule.scrollTop-=list.offsetHeight;
 else{
  rule.scrollTop++;
 }
}
var MyMar=setInterval(Marquee,speed);
rule.onmouseover=function() {clearInterval(MyMar)}
rule.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# js文字列表无缝滚动  # js文字无缝滚动  # js无缝滚动  # js实现图片无缝滚动特效  # 彻底搞懂JS无缝滚动代码  # div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox  # js 实现无缝滚动 兼容IE和FF  # js向上无缝滚动  # 网站公告效果 具体代码  # jcarousellite.js 基于Jquery的图片无缝滚动插件  # javascript实现的左右无缝滚动效果  # js实现可控制左右方向的无缝滚动效果  # JQuery插件Marquee.js实现无缝滚动效果  # JavaScript定时器实现无缝滚动图片  # 大家分享  # 具体内容  # 大家多多  # id  # rule  # lt  # div  # gt  # list  # onmouseout  # HTML  # js  # brush  # xhtml  # pre  # class  # XXX  # offsetTop  # scrollTop  # function 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 用v-html解决Vue.js渲染中html标签不被解析的问题  Android 常见的图片加载框架详细介绍  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  ,网页ppt怎么弄成自己的ppt?  矢量图网站制作软件,用千图网的一张矢量图做公司app首页,该网站并未说明版权等问题,这样做算不算侵权?应该如何解决?  Laravel如何实现文件上传和存储?(本地与S3配置)  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  详解Oracle修改字段类型方法总结  如何快速搭建虚拟主机网站?新手必看指南  jQuery validate插件功能与用法详解  Laravel怎么实现验证码(Captcha)功能  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗?  如何在 Python 中将列表项按字母顺序编号(a.、b.、c. …)  标题:Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  网站建设整体流程解析,建站其实很容易!  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  简历没回改:利用AI润色让你的文字更专业  打造顶配客厅影院,这份100寸电视推荐名单请查收  如何在IIS管理器中快速创建并配置网站?  网站广告牌制作方法,街上的广告牌,横幅,用PS还是其他软件做的?  nodejs redis 发布订阅机制封装实现方法及实例代码  如何用免费手机建站系统零基础打造专业网站?  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界?  如何在 React 中条件性地遍历数组并渲染元素  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  Laravel如何处理CORS跨域请求?(配置示例)  Laravel如何实现用户密码重置功能?(完整流程代码)  如何在阿里云香港服务器快速搭建网站?  高防网站服务器:DDoS防御与BGP线路的AI智能防护方案  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  如何快速建站并高效导出源代码?  JS实现鼠标移上去显示图片或微信二维码  Laravel storage目录权限问题_Laravel文件写入权限设置  如何快速配置高效服务器建站软件?  Android自定义控件实现温度旋转按钮效果  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  Python文件流缓冲机制_IO性能解析【教程】  Laravel如何与Docker(Sail)协同开发?(环境搭建教程)  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  佛山企业网站制作公司有哪些,沟通100网上服务官网?  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  在线制作视频网站免费,都有哪些好的动漫网站?  海南网站制作公司有哪些,海口网是哪家的?  如何在阿里云购买域名并搭建网站?  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  小视频制作网站有哪些,有什么看国内小视频的网站,求推荐?  移动端手机网站制作软件,掌上时代,移动端网站的谷歌SEO该如何做?  如何在阿里云虚拟服务器快速搭建网站?