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

最新推荐文章于 2024-10-15 09:57:04 发布

weixin_30267697

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量64

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/DeguangLi/archive/2010/06/04/1751558.html

版权

发表于 @ 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>

转载于:https://www.cnblogs.com/DeguangLi/archive/2010/06/04/1751558.html