替代marquee,图片连续滚动,不留空白

最新推荐文章于 2022-05-06 20:27:13 发布
最新推荐文章于 2022-05-06 20:27:13 发布
阅读量2k 收藏
点赞数
分类专栏： Web前端

<!---------------------------------------------上下滚动字幕----------------------------------------------->

<div id=maq style=overflow:hidden;height:100px;width:150px;> 
<div id=mtext> 
1.文字也是可以连续滚动的<br> 
2.文字也是可以连续滚动的<br> 
3.文字也是可以连续滚动的<br> 
4.文字也是可以连续滚动的<br> 
5.文字也是可以连续滚动的<br> 
6.文字也是可以连续滚动的<br> 
</div> 
<div id=m0></div> 
</div>

<script> 
var speed=40 //调整滚动速度 
m0.innerHTML=mtext.innerHTML 
function Marquee(){ 
if(m0.offsetTop-maq.scrollTop<=0) 
maq.scrollTop-=mtext.offsetHeight 
else{ 
maq.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
maq.οnmοuseοver=function() {clearInterval(MyMar)} 
maq.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
</script>

<!---------------------------------------------图片循环连续滚动代码，解决marquee的留白问题------------------------------------------->

向上： 
<base 

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> 

<div id=demo style="overflow:hidden; width:128px; height:300px;"> 
<div id=demo1> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
</div> 
<div id=demo2></div> 
</div> 
<script language="javascript"> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetTop-demo.scrollTop<=0) 
demo.scrollTop-=demo1.offsetHeight 
else{ 
demo.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.οnmοuseοver=function() {clearInterval(MyMar)} 
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
</script> 

向下： 
<base 

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> 

<div id=demo style="overflow:hidden; width:128px; height:300px;"> 
<div id=demo1> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
<img src="/gfjs.gif"><br><img src="/bxtt.gif"><br><img src="/bzjd.gif"><br> 
</div> 
<div id=demo2></div> 
</div> 
<script language="javascript"> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
demo.scrollTop=demo.scrollHeight 
function Marquee(){ 
if(demo1.offsetTop-demo.scrollTop>=0) 
demo.scrollTop+=demo2.offsetHeight 
else{ 
demo.scrollTop-- 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.οnmοuseοver=function() {clearInterval(MyMar)} 
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
</script> 

向左： 
<base 

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> 
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left 

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="/gfjs.gif"><img 

src="/bxtt.gif"><img src="/bzjd.gif"><img src="/gfjs.gif"><img src="/bxtt.gif"><img 

src="/bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div> 
<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetWidth-demo.scrollLeft<=0) 
demo.scrollLeft-=demo1.offsetWidth 
else{ 
demo.scrollLeft++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.οnmοuseοver=function() {clearInterval(MyMar)} 
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
</script> 

向右： 
<base 

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> 
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left 

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="/gfjs.gif"><img 

src="/bxtt.gif"><img src="/bzjd.gif"><img src="/gfjs.gif"><img src="/bxtt.gif"><img 

src="/bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div> 
<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
demo.scrollLeft=demo.scrollWidth 
function Marquee(){ 
if(demo.scrollLeft<=0) 
demo.scrollLeft+=demo2.offsetWidth 
else{ 
demo.scrollLeft-- 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.οnmοuseοver=function() {clearInterval(MyMar)} 
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
</script>

E-Kunt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用javascript实现代替marquee的滚动字幕效果代码
12-10
由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了之所以抛弃marquee是因为marquee是一个严重影响用户体验的东西，你把数十行内容压缩到几行滚动的确帮助你压缩了排版空间，但你有没有想过用户可能因为想阅读其中一两行的内容而不得不在你这个滚动上等半天？就以经典论坛页面上部“BlogBeta 数字引擎p4 3.0服务器只要6999元/年”广告文字右边的聚合文字滚动为例，你觉得这是一个很好的用户体验么？W3C的专家们难道还不如一群无知的小p孩考虑的周全？简直是笑话第一种方法：用javascript模拟marquee的做法。 出处：网易游戏
Marquee替代 -- 无间滚动
03-03
Marquee标签一直以来都被W3C排斥，而且，屁股后老带着段空白，这个是最让人恼火的... JS替代Marquee网上也有不少例子，可基本上都是单个实例，不支持多个，修改起来又麻烦，而且各个浏览器的兼容性也不是很好。所以，俺就做了个支持多个实例，兼容性好的替代品（其实是一年前做的...），虽然没什么技术含量，可是简单实用，只要简简单单的四步就能实现Marquee替代无间滚动效果。
Marquee不留白！
weixin_34365417的博客
03-29 155
<div style="width: 201px; height: 149px; overflow: hidden" id="demo"> <div id="demo1"> ...
<marquee>aa</marquee>实现内容滚动时首尾相连，不出现空白的时候
kaka100
05-17 1437
1233333333 var speed=15; //移动速度 demo2.innerHTML=demo1.innerHTML; function Marquee1(){ if(demo2.offsetWidth-demo.scrollLeft <=0){ demo.scrollLeft-=demo
marquee图片无缝滚动（上下左右均可）
11-17
- **图片滚动**：这意味着`<marquee>`标签或插件可以应用于图片元素，让图片也能实现滚动效果。 - **无缝滚动**：这是一个设计上的概念，强调滚动过程的平滑和连续，没有明显的中断。 - **marquee**：这是HTML中的一...
js替代marquee实现图片无缝滚动
04-25
传统的HTML标签`<marquee>`虽然可以实现滚动效果，但当用于滚动图片时，它会有一个明显的跳跃，即图片滚动到终点后立即返回起点，而不会像文字那样平滑过渡。为了弥补这一不足，我们可以利用JavaScript来实现图片的...
js jquery做的图片连续滚动代码
10-30
在JavaScript与jQuery中，实现图片连续滚动是一种常见的网页动态效果，常用于轮播图或广告展示。此代码段中，开发者遇到了点击图片后返回时出现的问题，这通常与图片滚动的逻辑和状态管理有关。接下来，我们将详细...
div+css布局的图片连续滚动js实现代码
10-29
在这个代码中，`overflow:hidden` 设置了当内容超出容器的边界时隐藏超出部分，从而实现图片滚动的隐藏和显示切换，创建出连续滚动的效果。 3. **CSS Float 属性**： `float` 属性用于指定元素如何浮动。在这个...
Vue替代marquee标签超出宽度文字横向滚动效果
10-15
【Vue替代marquee标签实现文字滚动效果】 在现代前端开发中，由于HTML5不推荐使用`<marquee>`标签，因为它被认为是过时且不标准的元素。为了在Vue项目中实现类似的效果，我们可以借助自定义组件或者第三方库来创建...
用javascript代替marquee的滚动字幕效果代码
10-30
用javascript代替marquee的滚动字幕效果代码
HTML标签marquee实现多种滚动效果(无需JS控制)
09-28
本文给大家介绍使用html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
JS与HTML结合使用marquee标签实现无缝滚动效果代码
11-22
最近在做一个前端开发的项目，需要实现无缝滚动效果，上下左右无缝滚动。下面小编把实现代码分享到软件开发网平台，需要的朋友可以参考下，有bug欢迎提出，共同学习进步。 具体代码如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>一行多列文字循环滚动带停顿-</TITLE> <m
html——marquee标签（跑马灯）
farmerXU的博客
10-10 595
虽然这个标签已经过时了，碰到了就还是记录一下 属性： behavior： 设置文本如何滚动。属性值有3种：scroll - 循环滚动。默认值。slide - 滚动一次。alternate - 两端来回滚动。 direction： 设置文本滚动的方向。属性值有4种：left - 从右向左。默认值。right - 从左向右。up - 向上。down - 向下。 loop： 设置滚动的次数。默认值-1，无限次循环。 scrollamount： 设置每次滚动时移动的长度（以像素为单位），也就是滚动速..
滚动效果【marquee已被html5弃用】
热门推荐
Jinming Su
11-22 1万+
滚动停止 this.stop 开始 this.start 无缝滚动 scrolltop，滚动高度
marquee跑马灯的替代方式
qq_38948398的博客
04-09 8643
随着H5的语义化，marquee标签逐渐被替代，后续可能浏览器不支持 这里介绍一下替代方式 实现位移的话，可以使用css3的transform配合过渡或者定时器 transition、transform、anmiation，使用css3的话，要考虑自己的应用场景，也就是滚动内容的宽度是固定的，因为@keyframe动画是在css中硬编码的，如果想用的话，这个就需要自己去找适合的插件了。 在...
marquee 循环空白解决方案完整代码+效果图
a_靖的博客
05-06 2947
跑马灯无间隙无效循环滚动效果图： 本篇文章要实现的是跑马灯无间隙无效循环滚动； marquee 标签滚动完一次以后，第二次会空白一个屏幕宽度才开始，而我们的需求是接在后面马上开始。我在网上找了一圈，没有发现能满足需求的属性，于是自己写逻辑了。 注释： 以下代码块的内容部分，应该填充跑马灯需要滚动的内容，自己随便填充。 示例：我的是for循环遍历的内容 默认跑马灯代码（如果可以接受有留白，用这代码就行，不用往后看） <marquee direction="left".
html marquee无缝滚动图片
最新发布
08-14
然后，我们将滚动的图片放在另一个div（`marquee-content`）中，并使用CSS样式设置其为内联块级元素，以便它们在同一行显示。 然后，我们使用CSS动画 `@keyframes` 来定义滚动效果。在这个示例中，我们将图片容器向...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值