代码1:
<!--现在文本的总高度是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>
代码2:
<!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操作**:...
本教程将详细介绍如何创建一个无缝兼容Firefox(火狐浏览器)和Internet Explorer(IE浏览器)的js跑马灯效果。 1. **JavaScript基础知识**: 在开始之前,我们需要对JavaScript的基础知识有一定了解。JavaScript...
高度自适应,兼容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脚本做法和分解(部分选自网上,经本人整理),希望对大家有帮助。
首先,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(层叠样式表)主要用于定义网页...