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

DoItPerfect

于 2007-10-25 02:27:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS/JAVASCRIPT 文章标签： ie web firefox javascript html function

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/DoItPerfect/article/details/1842620

HTML/CSS/JAVASCRIPT 专栏收录该内容

2 篇文章

订阅专栏

前阵子帮佳讯做项目用到双向滚动广告,偶从网上找个改改就凑合用,但在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" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

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

< script type ="text/javascript" src ="float.js" ></ script >

< style type ="text/css" >

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 id ="leftDiv" >

左侧广告内容 </ div >

< div id ="centerDiv" > 中间 </ div >

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

< img id ="testImg" style ="top:150px; left:380px;position:absolute;border:none;" src ="yourImagePath" />

< input id ="testButton" style ="position:absolute; top:200px; left:280px;" type ="button" value ="偶也来滚滚.." />

</ body >

</ html >

Javascript

float.js

/*

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

*date:2007-10-25

*author:DoItPerfect

*blog:http://blog.youkuaiyun.com/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:

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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。