这个滚动字幕在IE6下显示正常,在IE8下不显示文字,在火狐下文字不滚动!如何解决这个问题?
如果不能同时解决的话,如何解决在IE8下正常显示滚动!
<div id="marquees"> <a href="#" >链接一</a> <a href="#" >链接二</a> <a href="#" >链接三</a> <a href="#" >链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">marqueesWidth=500;with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",40);
}init();function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}
</script>
如果不能同时解决的话,如何解决在IE8下正常显示滚动!
<div id="marquees"> <a href="#" >链接一</a> <a href="#" >链接二</a> <a href="#" >链接三</a> <a href="#" >链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">marqueesWidth=500;with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",40);
}init();function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}
</script>
<html>
<head>
<title>dhScrollLeft</title>
<style>
a {font-size:12px;}
.dhMarquee {width:800px;height:25px;line-height:20px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;}
.mqdemo {margin:0px;padding:0px;border:0px;}
</style>
</head>
<body>
<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>
</body>
</html>