可以滚动任意对象的代码.符合web标准,支持IE,Firefox

来源：互联网发布：淘宝卷皮折扣官网编辑：程序博客网时间：2024/05/17 07:28

前阵子帮佳讯做项目用到双向滚动广告,偶从网上找个改改就凑合用,但在FF下无效.前几天抽了点时间把js代码重新修改下,现在支持Firefox,符合web标准,也更加容易使用了.好东东要分享!!

HTML测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>滚动对象,要啥滚都行.</title>

html, body { height:1000px; }

#leftDiv, #centerDiv, #rightDiv

{

/*距离顶部位置,必须*/

top:100px;

/*绝对定位,必须*/

position:absolute;

width:100px;

height:200px;

background-color:#FC6;

}

#leftDiv { left:1%; }

#centerDiv { left:47%; }

#rightDiv { left:87%; }

</style>

</head>

<body>

左侧广告内容</div>

<div id="rightDiv" ><span title="点击偶关闭!" style="display:block; cursor:pointer; text-align:right;" onclick="this.parentNode.style.display='none';">X</span>右侧广告内容</div>

</body>

</html>

Javascript

float.js

*title:垂直滚动对象,可以指定要滚动的对象,经测试支持IE6,Firefox2.0.

*date:2007-10-25

*author:DoItPerfect

*blog:http://blog.csdn.net/DoItPerfect

*ps.:滚动函数heartbeat从blueidea论坛获得并修改.

//对象距离顶部高度

var lastScrollY=0;

//移动

function heartbeat()

{

var diffY;

//IE

if (document.documentElement && document.documentElement.scrollTop)

diffY = document.documentElement.scrollTop;

//FireFox

else if (document.body)

diffY = document.body.scrollTop

else

{

//其他浏览器

}

percent=.1*(diffY-lastScrollY);

if(percent>0)

percent=Math.ceil(percent);

else

percent=Math.floor(percent);

//Change top attribute

for(var i=0;i<arguments.length;i++)

{

var floatDiv=document.getElementById(arguments[i]);

var top;

//IE

if(floatDiv.currentStyle)

top=parseInt(floatDiv.currentStyle.top);

else

//FireFox

top=parseInt(document.defaultView.getComputedStyle(floatDiv,null).getPropertyValue("top"));

floatDiv.style.top=top+percent+"px";

}

lastScrollY+=percent;

}

function moveObject()

{

var args=[];

for(var i=0;i<arguments.length;i++)

{

args.push(arguments[i]);

}

return window.setInterval(function(){heartBeat.apply(this,args);},1);

}

//调用方法:moveObject("object1的ID","object2的ID",...);

moveObject("leftDiv","rightDiv","centerDiv","testImg","testButton");

使用方法:

1.要滚动的对象必须设置样式(style)的top属性(单位为px,其他单位可能有问题),和设置为绝对定位(position:absolute;)

2.调用函数moveObject();参数类型为字符串,是对象的id.可以任意多个.//直接改js代码最后一句就好了.

Update:

可以滚动任意对象的代码.符合web标准,支持IE,Firefox

昨天发现将此方法应用到使用比较多控件的ASPX页面会出错,解决办法是不要在<head>标签下加入javascript,改成在要滚动的html元素的下方再加入<javascript src="float.js" type="text/javascript"></script>