javascript 一段左右两边随屏滚动的代码


Posted in Javascript onJune 18, 2009
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一段左右两边随屏滚动的代码</title> 
</head> <body> 
<script language="javascript"> 
var delta=0.15 
var collection; 
var closeB=false; 
function floaters(){ 
this.items=[]; 
this.addItem=function (id,x,y,content) 
{ 
document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'+(typeof (x)=='string'?eval(x):x)+';top:'+(typeof (y)=='string'?eval(y):y)+'">'+content+'</DIV>'); 
var newItem={ 
}; 
newItem.object=document.getElementById(id); 
newItem.x=x; 
newItem.y=y; 
this.items[this.items.length]=newItem; 
} 
this.play=function () 
{ 
collection=this.items 
setInterval('play()',10); 
} 
} 
function play() 
{ 
if(screen.width<=648||closeB) 
{ 
for(var i=0;i<collection.length;i++) 
{ 
collection[i].object.style.display='none'; 
} 
return ; 
} 
for(var i=0;i<collection.length;i++) 
{ 
var followObj=collection[i].object; 
var followObj_x=(typeof (collection[i].x)=='string'?eval(collection[i].x):collection[i].x); 
var followObj_y=(typeof (collection[i].y)=='string'?eval(collection[i].y):collection[i].y); 
if(followObj.offsetLeft!=(document.documentElement.scrollLeft+followObj_x)) 
{ 
var dx=(document.documentElement.scrollLeft+followObj_x-followObj.offsetLeft)*delta; 
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx)); 
followObj.style.left=followObj.offsetLeft+dx; 
} 
if(followObj.offsetTop!=(document.documentElement.scrollTop+followObj_y)) 
{ 
var dy=(document.documentElement.scrollTop+followObj_y-followObj.offsetTop)*delta; 
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy)); 
followObj.style.top=followObj.offsetTop+dy; 
} 
followObj.style.display=''; 
} 
} 
function closeBanner() 
{ 
closeB=true; 
return ; 
} 
var theFloaters=new floaters(); 
// 
theFloaters.addItem('followDiv2',22,238,'<a href=http://idc.66so.com/ target=_blank><img src=http://www.asp300.com/adimg/66so.gif border=0></a><br><br><a href=http://www.red.net.cn target=_blank><img src=http://www.asp300.com/adimg/red.gif border=0></a><br><br><a href=http://www.wiidc.com target=_blank><img src=http://www.asp300.com/adimg/wiidc.gif border=0></a><br><br><img align=right src=http://www.asp300.com/images/ADclose.gif border=0 onClick="closeBanner();">'); 
theFloaters.addItem('followDiv1','document.body.clientWidth-100',238,'<a href=http://www.zgdata.com/stat/stat.asp?siteKey=asp300&pageNO=1&urlCode=91a3ed97bd9897d315ff6bfaba46a8ee target=_blank><img src=http://www.asp300.com/adimg/zgdata.gif border=0 height=80 width=80></a><br><br><a href=http://www.go020.net/style/info/host.asp?typeid=1 target=_blank><img src=http://www.asp300.com/adimg/go020.gif border=0></a><br><br><a href=http://www.phsjnet.com target=_blank><img src=http://www.asp300.com/adimg/phsjnet.gif border=0></a><br><br><img align=right src=http://www.asp300.com/images/ADclose.gif border=0 onClick="closeBanner();">'); 
theFloaters.play(); 

</script> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
</body> 
</html>

打包下载
Javascript 相关文章推荐
基于JavaScript实现TAB标签效果
Jan 12 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 #Javascript
jquery 上下滚动广告
Jun 17 #Javascript
jQuery Ajax文件上传(php)
Jun 16 #Javascript
JavaScript 高级语法介绍
Jun 15 #Javascript
JavaScript 撑出页面文字换行
Jun 15 #Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 #Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 #Javascript
You might like
模仿OSO的论坛(五)
2006/10/09 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python实现网页自动签到功能
2019/01/21 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python里反向传播算法详解
2020/11/22 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
服务之星事迹材料
2014/05/03 职场文书
说明书怎么写
2014/05/06 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
庆国庆活动总结
2014/08/28 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL