<marquee 标签在IE8上出现显示不对

<marquee 标签在IE8下出现显示不对
使用 <marquee 标签，想让产品一行从右向左移动，在sogo浏览器下正常。如下图：


但是在IE和googl浏览器下，出现两行同时向左移动，如下图：



我的代码如下：

<div style="width:730px; height:180px; padding:0 10px;">
    <marquee onmouseover=stop() onmouseout=start() scrollAmount=3 direction=left">
        <c:forEach items="${recommendProductList}" var="productInfo" varStatus="step">
<div style="height:170px; width:170px; margin-left:10px; margin-top:15px; float:left;">
  <div style="height:120px; width:100%; text-align:center;">
<img src="<%=path%>/${productInfo.imgPath}" style="width:120px; height:120px;"/>
  </div>
  <div style="margin-top:10px; height:30px; text-align:center; overflow:hidden; text-       overflow:ellipsis; white-space:nowrap;">
<a href="#">${productInfo.productName}</a>
   </div>
 </div>
     </c:forEach>
   </marquee>
</div>

其中：<div style="height:170px; width:170px; margin-left:10px; margin-top:15px; float:left;">
每一个产品的div，里面包含一个图片的div 和 图片说明的div
${recommendProductList} 为从后来获取的数据,   ${productInfo.imgPath}为产品图片路径  ${productInfo.productName}为产品名称


这个哪儿写的有问题，请大家帮忙一下
[解决办法]
呵呵……<marquee> 标签有兼容问题的。楼主换js吧。
下面这个js代码很好用，选择其中需要的代码即可。

/*******************************************
    new Marquee({
        obj: 'myMarquee',// 滚动对象 (*必须)
        name: 'MyMQ_1',// 实例名 (可选，默认随机)
        mode: 'x',// 滚动模式 (x=水平, y=垂直) (可选，默认为x)
        interval: 10,// 滚动速度，越小速度越快 (可选，默认10，1秒=1000)
        speed: 1,// 滚动步长，越大数度越快 (可选，默认1像素)
        autoStart: true,// 自动开始 (可选，默认True)
        hovering: true// 是否悬停 (可选，默认True)
    });
********************************************/
var MyMarquees = new Array();
// 生成随机数
function RandStr(n, u){
    var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
    var Len = tmStr.length;
    var Str = "";
    for(i=1;i<n+1;i++){
        Str += tmStr.charAt(Math.random()*Len);
    }
    return (u ? Str.toUpperCase() : Str);
}
// 获取检测实例名
function getMyMQName(mName) {
    var name = mName==undefined ? RandStr(5) : mName;
    var myNames = ','+ MyMarquees.join(',') +',';

    while(myNames.indexOf(','+ name +',')!=-1) {
        name = RandStr(5); 
 
    }
    return name;
}
function Marquee(inits) {
    var $self = this;
    var $init = inits;

// 获取元素
$self.Get = function(e) {
 return typeof(e) == 'object' ? e : document.getElementById(e);
};

    // 无间滚动初始化
    $self.Init = function() {
if($init.obj==undefined) return;
// 滚动模式(x:横向, y:纵向)
$self.mode= $init.mode==undefined ? 'x' : $init.mode;
// 实例名
$self.mName= getMyMQName($init.name);
// 滚动对象
$self.mObj= $self.Get($init.obj);
// 滚动间歇
$self.interval= $init.interval==undefined ? 10 : $init.interval;
// 滚动间歇
$self.speed= $init.speed==undefined ? 1 : $init.speed;
// 自动开始
$self.autoStart= $init.autoStart==undefined ? true : $init.autoStart;
// 鼠标经过是否暂停
$self.hovering= $init.hovering==undefined ? true : $init.hovering;
// 计时器
$self.mDo= null;
// 暂停状态
$self.pause= false;

        if(($self.mObj.scrollWidth<=$self.mObj.offsetWidth && $self.mode=='x') 
[解决办法]
 ($self.mObj.scrollHeight<=$self.mObj.offsetHeight && $self.mode=='y')) return;

        MyMarquees.push($self.mName);

        // 克隆滚动内容
        $self.mObj.innerHTML = $self.mode=='x' ? (
            '<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
            '    <tr>'+
            '        <td id="MYMQ_'+ $self.mName +'_1">'+ $self.mObj.innerHTML +'</td>'+
            '        <td id="MYMQ_'+ $self.mName +'_2">'+ $self.mObj.innerHTML +'</td>'+
            '    </tr>'+
            '</table>'
        ) : (
            '<div id="MYMQ_'+ $self.mName +'_1">'+ $self.mObj.innerHTML +'</div>'+
            '<div id="MYMQ_'+ $self.mName +'_2">'+ $self.mObj.innerHTML +'</div>'
        );

        // 获取对象、高宽
        $self.mObj1 = $self.Get('MYMQ_'+ $self.mName +'_1');
        $self.mObj2 = $self.Get('MYMQ_'+ $self.mName +'_2');
        $self.mo1Width = $self.mObj1.scrollWidth;
        $self.mo1Height = $self.mObj1.scrollHeight; 
 

        // 初始滚动
        if($self.autoStart) $self.Start();
    };

    // 开始滚动
    $self.Start = function() {
clearInterval($self.mDo);
        $self.mDo = setInterval(($self.mode=='x' ? $self.MoveX : $self.MoveY), $self.interval);
        if($self.hovering) {
            $self.mObj.onmouseover = function() {$self.pause = true;};
            $self.mObj.onmouseout = function() {$self.pause = false;};
        }
    }

    // 停止滚动
    $self.Stop = function() {
        clearInterval($self.mDo);
        $self.mObj.onmouseover = function() {};
        $self.mObj.onmouseout = function() {};
    }

    // 水平滚动
    $self.MoveX = function() {
        if($self.pause) return;
        var left = $self.mObj.scrollLeft;
        if(left>=$self.mo1Width && $self.speed>0) {
            $self.mObj.scrollLeft = left-$self.mo1Width-$self.speed;
        }else if(left==0 && $self.speed<0) {
            $self.mObj.scrollLeft = $self.mo1Width-$self.speed;
        }else{
            $self.mObj.scrollLeft += $self.speed;
        }
    };

    // 垂直滚动
    $self.MoveY = function() {
        if($self.pause) return;
        var top = $self.mObj.scrollTop;
        if(top>=$self.mo1Height && $self.speed>0){
            $self.mObj.scrollTop = top-$self.mo1Height-$self.speed;
        }else if(top==0 && $self.speed<0) {
            $self.mObj.scrollTop = $self.mo1Height-$self.speed;
        }else{
            $self.mObj.scrollTop += $self.speed;
        }
    };

    $self.Init();
}

查看更多 下一篇