使用 <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);