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 相关文章推荐
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
async/await地狱该如何避免详解
May 10 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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
基于mysql的bbs设计(二)
2006/10/09 PHP
php实现的简单日志写入函数
2015/03/31 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python 使用get_argument获取url query参数
2017/04/28 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python实现自动发送邮件
2018/06/20 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python 同时运行多个程序的实例
2019/01/07 Python
python 三元运算符使用解析
2019/09/16 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
纪检干部个人对照检查材料
2014/09/23 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
水知道答案观后感
2015/06/08 职场文书
百家讲坛观后感
2015/06/12 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android