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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
js验证表单大全
Nov 25 Javascript
Javascript MD4
Dec 20 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
js实现点击选项置顶动画效果
Aug 25 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php 操作调试的方法
2012/07/12 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
力学专业求职信
2014/07/23 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
借条格式范本
2015/05/25 职场文书
2016年党建工作简报
2015/11/26 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
求职信如何撰写?
2019/05/22 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Python中的变量与常量
2021/11/11 Python
详解Python如何批量采集京东商品数据流程
2022/01/22 Python