以前代码是转载其他网站的，在这儿收藏下。
实现1：(兼容FF)
<div id="div_scroll" style=" padding-top:20px; overflow:hidden;height:60px;width:920px; margin:0 auto;">
<table height="129" border=0 align=left cellpadding=0 cellspace=0>
<tr><td id=div_scroll1 valign=buttom>
<table width="918" height="60" border=0 cellpadding=0 cellspacing=0>
<img src="../images/mh_pattern.png"/>
</table>
</td><td id=div_scroll2 valign=top></td></tr></table></div>
<SCRIPT>
var speed1=25//速度数值越大速度越慢
document.getElementById("div_scroll2").innerHTML=document.getElementById("div_scroll1").innerHTML
function Marquee1(){
if(document.getElementById("div_scroll2").offsetWidth-document.getElementById("div_scroll").scrollLeft<=0)
document.getElementById("div_scroll").scrollLeft-=document.getElementById("div_scroll1").offsetWidth
else{
document.getElementById("div_scroll").scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
document.getElementById("div_scroll").onmouseover=function () {clearInterval(MyMar1)}
document.getElementById("div_scroll").onmouseout=function () {MyMar1=setInterval(Marquee1,speed1)}
</SCRIPT>
实现2：(兼容火狐)
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function VScrollPanel() {
this.width = null; //滚动范围宽度
this.height = null; //滚动范围高度
this.delay = 100; //时间延迟
this.step = 1; //单步滚动像素
}
VScrollPanel.prototype = {
//滚动指定ID的内容
Bind: function (domID) {
this.dom = document.getElementById(domID);
if (this.width) {
this.dom.style.width = this.width + "px";
}
if (this.height) {
this.dom.style.height = this.height + "px";
}
this.dom.style.overflow = "hidden";
this.Scrolling();
},
//滚动方法
Scrolling: function () {
//如果内容太少,已经完全可以显示,不需滚动
if (this.dom.scrollHeight <= this.dom.clientHeight) return;
//滚动到最后一项,切换位置
if (this.willSwap) {
this.dom.appendChild(this.lastOne);
this.willSwap = false;
}
//一个对象自身的引用
var _this = this;
if (this.dom.scrollTop+ this.step + this.dom.clientHeight
>= this.dom.scrollHeight) {
//滚动到达底部
//删除临时添加的首项
if (this.tmp != null) this.dom.removeChild(this.tmp);
//复制第一项,即将移至最后一项
this.lastOne = this.dom.firstChild;
this.tmp = this.lastOne.cloneNode(true);
//添加第一项
//this.lastOne.replaceNode(this.tmp);
//在此用replaceChild替代replaceNode即可兼容FF
this.dom.replaceChild(this.tmp,this.lastOne);
/*至于为什么要复制第一项，并临时插入
是因为如果在滚动内容刚好足够滚动时，如果没有这个临时项，
直接移动第一项到最后一项的时候，会发生跳动现象。
也就是，比如：如果有4项，不会发生滚动，而如果有5项的时候，就发生这种现象
但6项以上的时候，正常*/
this.willSwap = true;
}
this.dom.scrollTop += this.step;
setTimeout(function () {
/*此处必须用 _this 代替 this 否则错误，原因在此不阐述*/
_this.Scrolling();
}, this.delay);
},
Pause: function () {
this.pauseStep = this.step;
this.step = 0;
},
Continue: function () {
this.step = this.pauseStep;
}
};
/*经过多次实验，水平滚动通过新建一个表格来设置布局
才能最有效的保证布局不会乱，不会发生换行
所以只好水平、垂直滚动的分开做了*/
//水平滚动。以下代码思路同上，不再注释
function HScrollPanel() {
this.width = null;
this.height = null;
this.delay = 100;
this.step = 1;
}
HScrollPanel.prototype = {
Bind: function (domID) {
this.dom = document.getElementById(domID);
this.rootDom = document.createElement("table");
this.rootDom.border = "0";
this.rootDom.cellPadding = "0";
this.rootDom.cellSpacing = "0";
var tbody = document.createElement("tbody");
this.rootDom.appendChild(tbody);
this.row = document.createElement("tr");
tbody.appendChild(this.row);
var child = this.dom.firstChild;
while (child != null) {
this.dom.removeChild(child);
if (child.nodeType == 1) {
var td = document.createElement("td");
td.vAlign = "top";
td.appendChild(child);
this.row.appendChild(td);
}
child = this.dom.firstChild;
}
this.dom.appendChild(this.rootDom);
if (this.width) {
this.dom.style.width = this.width + "px";
}
if (this.height) {
this.dom.style.height = this.height + "px";
}
this.dom.style.overflow = "hidden";
this.Scrolling();
},
Scrolling: function () {
if (this.dom.scrollWidth <= this.dom.clientWidth) return;
if (this.willSwap) {
this.row.appendChild(this.lastOne);
this.willSwap = false;
}
var _this = this;
if (this.dom.scrollLeft + this.step + this.dom.clientWidth
>= this.dom.scrollWidth) {
if (this.tmp != null) {
this.row.removeChild(this.tmp);
}
this.lastOne = this.row.firstChild;
this.tmp = this.lastOne.cloneNode(true);
//this.lastOne.replaceNode(this.tmp);
this.row.replaceChild(this.tmp,this.lastOne);
this.willSwap = true;
}
this.dom.scrollLeft += this.step;
setTimeout(function () { _this.Scrolling(); }, this.delay);
},
Pause: function () {
this.pauseStep = this.step;
this.step = 0;
},
Continue: function () {
this.step = this.pauseStep;
}
};
</script>
<style type="text/css">
body,td
{
font-family:"宋体";
font-size:12px;
}
.item
{
width:150px;
background-color:#f0f0f0;
text-align:center;
margin:5px;
padding:3px;
}
</style>
</head>
<body>
垂直滚动示例<input type="text" value="100" onchange="SetDelay(this);" />
<div id="divVScroll" onmouseover="vsp.Pause();" onmouseout="vsp.Continue()">
<div class="item">AAAAAA</div>
<div class="item">BBBBBB</div>
<div class="item">CCCCCC</div>
<div class="item">DDDDDD</div>
<div class="item">EEEEEE</div>
<div class="item"line-height: 18px; c
分享到：
相关推荐
JS实现无缝滚动三种样式 JS实现无缝滚动三种样式 JS实现无缝滚动三种样式 JS实现无缝滚动三种样式 JS实现无缝滚动三种样式 JS实现无缝滚动三种样式 http://blog.lamp99.com/1113.html
在JS实现无缝滚动时，通常会涉及到以下几个关键知识点： 1. **DOM操作**：JavaScript通过Document Object Model（DOM）来操作网页内容。在无缝滚动中，我们需要选取要滚动的元素，如一个包含多条内容的列表，然后...
本教程将深入探讨如何使用原生JavaScript（JS）实现一个无缝滚动轮播图，无需依赖任何外部库，如jQuery或其他轮播插件。 首先，我们需要创建HTML结构。一个简单的轮播图通常包含一个容器div，以及若干个用于展示...
原生JavaScript实现无缝滚动是一种常见的网页动态效果，它能让页面中的内容在用户视线内不间断地滚动，提升用户体验，尤其适用于新闻列表、轮播图等场景。在这个原型demo中，我们将探讨如何利用JavaScript来创建这样...
在本文中，我们将深入探讨如何使用原生JavaScript实现一个无缝滚动轮播图。无缝轮播图是一种常见的网页元素，用于展示一系列图片或内容，并通过自动或手动切换来创建连续无中断的浏览体验。这种效果在现代网站设计中...
为了提供更好的用户体验，可以采用JavaScript（js）来实现表格的无缝滚动效果，让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用，它能让用户更容易地浏览和查找信息。 首先，...
总结来说，JavaScript无缝滚动技术是通过数组和定时器结合DOM操作来实现的。无论是文字还是图片，都可以通过这种方法实现流畅的滚动效果。在实际开发中，可以根据项目需求进行定制，如调整滚动速度、添加不同的过渡...
本教程将深入探讨如何使用纯JavaScript实现一个无缝滚动轮播图效果，不依赖任何外部库，如jQuery或其他框架。 首先，我们需要理解轮播图的基本结构。它通常包含一个容器，里面有几个图片（或内容）元素，以及可能的...
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
消息列表向上滚动，不使用js操作，纯css3实现向上无缝滚动。
本文将深入探讨如何通过JavaScript（简称JS）来实现图片的无缝滚动，旨在为开发者提供一个完整且易于理解的解决方案。 #### 关键概念解析 - **`<marquee>`**：这是一个HTML标签，用于创建自动滚动的文本或图片流，...
本示例将探讨如何使用原生JavaScript来实现一个简单的无缝滚动效果。 首先，我们需要理解无缝滚动的基本原理。无缝滚动通常是通过在视口顶部或底部自动加载新的内容，模拟无限滚动的效果。这可以通过监听滚动事件，...
"无缝滚动"的实现主要依赖于JavaScript的定时器（setTimeout或setInterval）和DOM操作。下面我们将详细介绍如何用JS来制作图片的向上无缝滚动效果： 1. **HTML结构**： 首先，我们需要在HTML中设置一个包含所有图片...
**JavaScript与jQuery实现无缝滚动轮播图** 在网页设计中，轮播图是一种常见的展示多张图片或内容的交互方式，它可以节省空间并提供丰富的视觉体验。无缝滚动轮播图则是这种展示方式的一种升级，它使得用户在浏览...
js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js ...
通过这种方式，你可以实现一个基于原生JavaScript和Vue.js的左右无缝滚动组件，同时利用CSS实现美观的视觉效果。这不仅能够提升用户体验，还可以作为学习Vue组件化开发的一个实用案例。在实际项目中，你可能还需要...
在提供的代码示例中，通过JavaScript结合CSS实现了一个类似`<marquee>`标签的无缝循环滚动效果。 - **关键代码解析**： - **CSS样式**：定义了滚动区域的背景颜色、溢出隐藏、宽度和高度等样式。 - **HTML结构**...
### JS 无缝滚动，鼠标放上去暂停代码 在前端开发中，实现文本或图片的无缝滚动效果是非常常见的需求之一，特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验，还能增加页面的吸引力。本文将详细...
需要注意的是，这种无缝滚动的实现可能会影响性能，特别是当表格数据量巨大时。因此，优化是必不可少的，例如使用虚拟滚动（只渲染可视范围内的行）来减少DOM元素的数量，或者对大数据进行分页处理。 总的来说，...