无缝滚动一例(支持IE、FF)

原创 2006年06月08日 15:09:00

仅供参考:

左右方向支持IE、FF

<style>
a {font-size:12px;}
.dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;}
.mqdemo {margin:0px;padding:0px;border:0px;}
</style>
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1">
<span id="mqdemo" class="mqdemo">
<a href="javascript:alert('1')">月圆之夜</a>
<a href="javascript:alert('2')">紫禁之颠</a>
<a href="javascript:alert('3')">西门吹雪</a>
<a href="javascript:alert('4')">天外飞仙</a>
</span>
</div>
<script language="javascript">
var speed = 90;
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象
var oMarquee = document.getElementById("mq");
//内容对象
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
 oMarquee.scrollLeft += iScrollAmount;
 var ol = oMarquee.scrollLeft;
 //IE和FF的位置有不同
 if(isMSIE){
  if(odl-ol<=0){
   oMarquee.scrollLeft = 0;
  }
 }else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }
 }
}
var MyMar = window.setInterval(scroll,speed);
</script>

上下方向支持IE、FF

<style>
.dhMarquee {width:100px;height:100px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;}
.mqdemo {margin:0px;padding:0px;border:0px;}
.dhScrollA {font-size:12px;display:block;padding:2px;}
</style>
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1">
<div id="mqdemo" class="mqdemo">
<a class="dhScrollA" href="javascript:alert('1')">月圆之夜</a>
<a class="dhScrollA" href="javascript:alert('2')">紫禁之颠</a>
<a class="dhScrollA" href="javascript:alert('3')">西门吹雪</a>
<a class="dhScrollA" href="javascript:alert('4')">天外飞仙</a>
</div>
</div>
<script language="javascript">
var speed = 90;
//滚动对象
var oMarquee = document.getElementById("mq");
//内容对象
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetHeight;
var odl = omqdemo.offsetHeight;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){
 var o = omqdemo.cloneNode(true);
 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
 oMarquee.scrollTop += iScrollAmount;
 var ol = oMarquee.scrollTop;
 if(odl-ol<=0){
  oMarquee.scrollTop = 0;
 }
}
var MyMar = window.setInterval(scroll,speed);
</script>

JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)var $ = function (id) {    return "string" == typeof id ? docum...

ASP.NET控件开发之ScrollGridView(兼容FF、IE、苹果、谷歌、搜狗,固定表头滚动的GridView控件)

这篇文章本来在2个月前就应该写了的,只是一直没有找到好的解决方案,所以迟迟没有动笔,直到今天,才找到了比较满意的解决方案。 网上关于固定GridView表头,常见的有两种解决方案,一种是采用css样式...

IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉

DTD已声明 IE document.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度...
  • wudiazu
  • wudiazu
  • 2016年11月14日 18:14
  • 749

兼容xhtml,html,ff,ie的滚动条css样式

====================================================== 注:本文源代码点此下载 =============================...

IE/FF/Chrome下document.documentElement/body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否到达页面底部。

DTD已声明: IE document.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度...

无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome

无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome

JS向上下左右不间断无缝滚动图片代码(兼容IE火狐)

JS向上下左右不间断无缝滚动图片代码(兼容火狐和IE) var speed=30...

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net var speed=30; var colee2=document.getEleme...

无缝滚动图片、跑马灯、浏览器是否IE

javascript无缝滚动  by gtf     h1 {     font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun ...
  • gtfccit
  • gtfccit
  • 2013年09月24日 17:03
  • 670
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:无缝滚动一例(支持IE、FF)
举报原因:
原因补充:

(最多只允许输入30个字)