zhangjingyu
最初的调用方式是在首页多格文件(newinfo.htm)里添加的如下代码:
祺声广播 我的首页
[左快] [左] [停] [右] [右快]
“(上面的代码)这个滚动显示部分的代码有没有“落后”,或者有没有兼容性显示的问题(似乎看到过当滚动到最左边的时候,突然就没有了,后面没滚动完的也一起消失了,然后重新向左滚动)”(引用内容)你观察得极其准确!你看到的这个现象——“滚动到最左边时突然消失,后面的内容消失,然后重新开始滚动”,正是这串老代码最大的“坑”,也是严重落后于现代浏览器兼容性的表现。
这段代码带有非常浓厚的 IE6/IE7 时代的痕迹。我们来详细解剖一下它哪里“落后”了,以及怎么帮你把它现代化、修复那个烦人的闪断问题。
一、 它到底哪里“落后”了?
1. 使用了万恶的 标签
是微软当年在 IE 浏览器里自己搞出来的私有标签,根本没有写进 W3C 的 HTML 标准里。虽然现在的浏览器为了兼容老旧网页依然支持它,但它本身极其不稳定,动画效果是“硬编码”的,不流畅,而且存在很多无法控制的 Bug。
2. 触发了 HTML5 的废弃语法 document.all
你看那些控制滚动的按钮:onclick="document.all.wvforum.start();..."。
document.all 是 20 多年前 IE 浏览器的专属 API。现代浏览器(Chrome, Edge, Firefox)早就把它废弃了,虽然为了兼容还留着一层影子,但用起来经常会出现莫名其妙的问题。
3. 导致“内容消失”的罪魁祸首:truespeed 属性
原代码里写了 。
truespeed 的本意是“精确控制速度(1像素/帧)”。但在现代高分屏和极快的浏览器渲染引擎下,配合极慢的 scrolldelay='25',会导致内容在滚出左侧边界后,计算坐标出现异常,直接把剩下的内容“吞掉”了。这就是你看到它突然消失的原因。
4. 宽度上的硬伤 width:97%
style="width:97%; float:right" 这个设置,加上旁边的小喇叭图标,很容易导致滚动区域和左侧边缘计算不准确,还没滚完就提前触发重新开始。
二、 如何彻底解决?(拥抱现代 CSS 动画)
我们要把这些老古董( 标签、document.all)统统扔掉,使用现代前端标准的 CSS3 动画 (@keyframes) 加上一点点 JavaScript 来重构。
这样改的好处是:极其丝滑、绝对不消失、性能极好、完美兼容所有现代手机和电脑浏览器。
由于你这个页面是通过 PHP 动态生成的(那个 t.php 负责吐数据),我无法直接修改 t.php 里的内容,所以我用 JS 在页面加载后把老代码替换掉,并重构了广播控制逻辑。
(代码略)
为什么这个版本更好?
根除消失 Bug:抛弃了 ,使用了 CSS 的 transform: translateX。它的计算极度精确,无论滚多久,绝对不会“吞”内容。它会完美地从右侧出来,平滑地完全离开左侧,然后再无缝循环。
性能起飞:CSS 动画是交由显卡(GPU)加速渲染的,比老式 JS 逐帧算坐标流畅 100 倍。鼠标放上去还能自动暂停。
消灭了废弃 API:document.all 被彻底扫进垃圾桶,改用标准的 DOM 操作。
速度控制更科学:原来的 scrollamount 是像素级控制,现在直接改 CSS 的 animationDuration(时间),想快就快想慢就慢,非常优雅。
注意:因为原代码里是通过 来加载文本的,我这里用了一小段 AJAX 去拉取内容,如果你发现文字没出来,可能是老 PHP 系统输出的某些格式需要调整。如果出现这种情况,你可以把 t.php?at=simpledata&type=1 在浏览器里直接打开,把看到的纯文本内容告诉我就行,我再帮你用静态的方式塞进去。

