关闭

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

标签: iejavascriptscrollclassmicrosoftfunction
1178人阅读 评论(1) 收藏 举报
分类:

仅供参考:

左右方向支持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>

0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:121223次
    • 积分:2019
    • 等级:
    • 排名:第18997名
    • 原创:73篇
    • 转载:4篇
    • 译文:1篇
    • 评论:98条
    文章分类
    最新评论