代码１：
<!--现在文本的总高度是10*(16+2*2)=200,所以外框的高度不能大于200px;-->
<html>
<HEAD>
<TITLE>西邮评估网</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>
#demo a {
width:100%;
overflow:hidden;
font:12px/16px tahoma;
display:block;
text-decoration:none;
margin:2px;
color:#4a551c;
padding-left:2px;
text-align:left;
}
#demo a:hover {
color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<div id="demo" style="overflow:hidden;height:132px;width:400px; border:1px solid #dde5bc; overflow:hidden;">
<div id=demo1>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
</div>
<div id=demo2></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
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.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
代码２：
<!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>21Andy.com - 兼容IE和FireFox的间隔滚动代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body {
text-align:center;
}
#andyscroll {
overflow: hidden;
background: #E8F8F8;
padding: 0 10px;
text-align: left;
width:400px;
height:100px;
overflow:hidden;
}
#andyscroll a {
font:12px/18px tahoma;
color: #000;
float:left;
width:100%;
text-decoration: none;
display:block;
}
#andyscroll a:hover {
font:12px/18px tahoma;
color: #F60;
}
-->
</style>
</head>
<body>
<div id="andyscroll">
<div id="scrollmessage">
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
</div>
</div>
<script type="text/javascript">
<!--
var stopscroll = false;
var scrollElem = document.getElementById("andyscroll");
var marqueesHeight = scrollElem.style.height;
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 25);//的面的这个参数25, 是确定滚动速度的, 数值越小, 速度越快
}
function scrollUp(){
if(stopscroll) return;
currentTop += 2; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
if(currentTop == 19) {
stoptime += 1;
currentTop -= 1;
if(stoptime == 180) {
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
}
//-->
</script>
</body>
</html>
分享到：
相关推荐
在本主题中，我们关注的是"js代码 无缝滚动效果"，这是一种常见于网站顶部新闻滚动、轮播图或者产品展示等场景的技术。无缝滚动效果给予用户流畅且连续的视觉体验，仿佛图片或文本在不停滚动，没有明显的停顿或跳跃...
一个windows下用来设置ie兼容的脚本，方便批量设置，不用每台机器都设置一遍了； 一个windows下用来设置ie兼容的脚本，方便批量设置，不用每台机器都设置一遍了
鉴于无缝滚动效果依赖JavaScript，需要确保代码对各种浏览器的兼容性。可能需要使用条件语句或库（如jQuery）来处理不同浏览器之间的差异。 6. **性能优化**： 为了防止过度占用CPU资源，可以设置适当的滚动速度...
在这个项目中，我们关注的是一个简单的JS滚动新闻实现，它不仅支持早期的Internet Explorer 6（IE6），还兼容其他主流的现代浏览器。 在Web开发中，滚动新闻是一种常见的功能，它能够在页面上动态展示新闻标题或...
本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果，同时确保其在火狐浏览器上的兼容性。 一、jQuery简介 jQuery是一款高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
接下来，我们可能还需要一个JavaScript（或jQuery）脚本来实现无缝滚动。主要步骤包括： 1. **获取图片列表**：找到所有的图片元素，并记录其宽度。 2. **计算总宽度**：将所有图片宽度相加，再加上适当的间隙，...
《JQ文字无缝滚动效果详解》 在网页设计中，为了吸引用户的注意力并展示大量信息，文字无缝滚动效果被广泛应用。这种效果可以让文字像新闻滚动条一样，不断循环滚动，既节省空间，又富有动态美感。本文将深入探讨...
1. **JavaScript基础**：无缝滚动效果主要依赖JavaScript来实现，这是一种客户端脚本语言，用于增强网页的交互性。在浏览器环境中，JavaScript可以动态修改HTML和CSS，实现各种动态效果。 2. **DOM操作**：...
高度自适应，兼容IE，FF，CHROME”是一个jQuery插件或脚本的描述，它主要用于网页中创建一个功能强大的横幅滚动效果。这个效果允许网页上的区块或链接在水平方向上进行无缝循环滚动，同时具备自适应宽度和高度的能力...
在本资源中，作者针对兼容性问题进行了优化，使得推拉门菜单可以在Internet Explorer（IE）和Firefox（FF）这两个主流浏览器上正常工作。 在Web开发中，由于不同浏览器对CSS、JavaScript等技术的解析和实现存在差异...
在网页设计中，大图无缝滚动效果是常见的展示手段，它可以为网站增添视觉吸引力，提升用户体验。这个"js无缝大图滚动"的资源正是针对这种效果的实现。 无缝滚动效果，通常指的是在一组图片或内容之间实现平滑、不...
7. **浏览器兼容性**：描述中提到的“兼容IE，FF，CHROME”意味着这个解决方案考虑到了不同浏览器之间的差异，可能使用了如`$.browser`（已被弃用）或`$.support`等工具来检测浏览器特性，或者使用polyfill来实现...
接下来编写jQuery脚本来实现无缝滚动效果。可以创建一个函数`startMarquee()`，并在页面加载完成后调用它： ```javascript $(document).ready(function() { startMarquee(); }); function startMarquee() { var ...
做BS开发就难免会用到javascript，而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们下面是兼容IE和FF的js脚本做法和分解（部分选自网上，经本人整理），希望对大家有帮助。
在本文中，我们将深入探讨如何使用JavaScript实现文字的无缝滚动效果，并且能够控制滚动的方向，包括上下左右四个方向。这种效果常用于网站头部新闻滚动、公告展示等场景，能够有效地吸引用户的注意力。 首先，我们...
首先，IE、FF和Opera分别指的是三个不同的浏览器：Internet Explorer、Mozilla Firefox和Opera。虽然Opera目前的市场份额相对较低，但在过去，尤其是在IE和Firefox的市场份额之争中，Opera作为一款具有特色和创新的...
标题中的“上传图片预览-兼容IE6，IE7，IE8，FF”指的是一个Web开发的技术解决方案，目的是实现图片上传前的预览功能，并确保该功能在早期版本的Internet Explorer（IE6、IE7、IE8）以及Firefox浏览器上都能正常工作...
本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先，我们需要理解无缝滚动的基本原理。它通过调整图片的显示顺序，让最后一张图片紧跟在第一张图片之后，从而在视觉上创造出无中断的滚动效果。...
本篇文章将深入探讨如何利用JavaScript（JS）和CSS实现一个兼容各浏览器的水平和垂直无缝图片滚动效果，以及相关的技术细节。 首先，让我们了解一下JS和CSS在这项任务中的角色。CSS（层叠样式表）主要用于定义网页...