代码改变世界

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

2010-06-04 16:35  DeguangLi  阅读(227)  评论(0编辑  收藏  举报

发表于 @ 2007年10月25日 02:27:00 

 

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

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