`
hefan
  • 浏览: 45785 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

[脚本]兼容IE, FF, Opera的无缝滚动效果……

阅读更多
代码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>
分享到:
评论

相关推荐

    无缝图片滚动效果,基于IE6,好看使用的

    这个文件可能包含了实现无缝滚动的JavaScript代码,包括定义滚动速度、动画效果、事件监听等功能。开发者可以通过引入这个文件到HTML页面,并配置相关参数来启用图片滚动效果。 在实际应用中,创建无缝图片滚动效果...

    js代码 无缝滚动效果

    在本主题中,我们关注的是"js代码 无缝滚动效果",这是一种常见于网站顶部新闻滚动、轮播图或者产品展示等场景的技术。无缝滚动效果给予用户流畅且连续的视觉体验,仿佛图片或文本在不停滚动,没有明显的停顿或跳跃...

    ie设置兼容脚本

    一个windows下用来设置ie兼容的脚本,方便批量设置,不用每台机器都设置一遍了; 一个windows下用来设置ie兼容的脚本,方便批量设置,不用每台机器都设置一遍了

    无缝滚动效果js

    鉴于无缝滚动效果依赖JavaScript,需要确保代码对各种浏览器的兼容性。可能需要使用条件语句或库(如jQuery)来处理不同浏览器之间的差异。 6. **性能优化**: 为了防止过度占用CPU资源,可以设置适当的滚动速度...

    JS最简单的滚动新闻,兼容IE6及其他主流浏览器

    在这个项目中,我们关注的是一个简单的JS滚动新闻实现,它不仅支持早期的Internet Explorer 6(IE6),还兼容其他主流的现代浏览器。 在Web开发中,滚动新闻是一种常见的功能,它能够在页面上动态展示新闻标题或...

    jquery 无缝滚动 demo

    本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果,同时确保其在火狐浏览器上的兼容性。 一、jQuery简介 jQuery是一款高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...

    DIV+CSS实现横向无缝图片滚动效果

    接下来,我们可能还需要一个JavaScript(或jQuery)脚本来实现无缝滚动。主要步骤包括: 1. **获取图片列表**:找到所有的图片元素,并记录其宽度。 2. **计算总宽度**:将所有图片宽度相加,再加上适当的间隙,...

    JQ 文字无缝滚动效果

    《JQ文字无缝滚动效果详解》 在网页设计中,为了吸引用户的注意力并展示大量信息,文字无缝滚动效果被广泛应用。这种效果可以让文字像新闻滚动条一样,不断循环滚动,既节省空间,又富有动态美感。本文将深入探讨...

    图片无缝滚动插件上下左右图片无缝滚动代码.zip

    1. **JavaScript基础**:无缝滚动效果主要依赖JavaScript来实现,这是一种客户端脚本语言,用于增强网页的交互性。在浏览器环境中,JavaScript可以动态修改HTML和CSS,实现各种动态效果。 2. **DOM操作**:...

    无缝兼容FF\IE的js跑马灯

    本教程将详细介绍如何创建一个无缝兼容Firefox(火狐浏览器)和Internet Explorer(IE浏览器)的js跑马灯效果。 1. **JavaScript基础知识**: 在开始之前,我们需要对JavaScript的基础知识有一定了解。JavaScript...

    ie8兼容脚本ie8兼容脚本

    ie8兼容脚本ie8兼容脚本ie8兼容脚本ie8兼容脚本ie8兼容脚本

    jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度。高度自适应,兼容IE,FF,CHROME.zip

    高度自适应,兼容IE,FF,CHROME”是一个jQuery插件或脚本的描述,它主要用于网页中创建一个功能强大的横幅滚动效果。这个效果允许网页上的区块或链接在水平方向上进行无缝循环滚动,同时具备自适应宽度和高度的能力...

    推拉门式菜单-兼容ie,ff

    在本资源中,作者针对兼容性问题进行了优化,使得推拉门菜单可以在Internet Explorer(IE)和Firefox(FF)这两个主流浏览器上正常工作。 在Web开发中,由于不同浏览器对CSS、JavaScript等技术的解析和实现存在差异...

    js大图无缝滚动效果

    在网页设计中,大图无缝滚动效果是常见的展示手段,它可以为网站增添视觉吸引力,提升用户体验。这个"js无缝大图滚动"的资源正是针对这种效果的实现。 无缝滚动效果,通常指的是在一组图片或内容之间实现平滑、不...

    jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度 高度自适应,兼容IE,FF,CHROME.zip

    7. **浏览器兼容性**:描述中提到的“兼容IE,FF,CHROME”意味着这个解决方案考虑到了不同浏览器之间的差异,可能使用了如`$.browser`(已被弃用)或`$.support`等工具来检测浏览器特性,或者使用polyfill来实现...

    jQuery实现网站中公告上下无缝滚动,marquee

    接下来编写jQuery脚本来实现无缝滚动效果。可以创建一个函数`startMarquee()`,并在页面加载完成后调用它: ```javascript $(document).ready(function() { startMarquee(); }); function startMarquee() { var ...

    兼容IE和FF的js脚本代码小结(比较常用)

    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们下面是兼容IE和FF的js脚本做法和分解(部分选自网上,经本人整理),希望对大家有帮助。

    兼容IE FF Opera的javascript最短的拖动代码

    首先,IE、FF和Opera分别指的是三个不同的浏览器:Internet Explorer、Mozilla Firefox和Opera。虽然Opera目前的市场份额相对较低,但在过去,尤其是在IE和Firefox的市场份额之争中,Opera作为一款具有特色和创新的...

    很炫的图片无缝上下滚动效果.rar

    4. **js** - 这个文件夹可能包含了实现无缝滚动效果的JavaScript源代码。可能有一个或多个.js文件,比如一个主函数文件和可能的辅助函数或库。 这个资源包的使用方法可能包括打开`index.html`在浏览器中查看效果,...

Global site tag (gtag.js) - Google Analytics