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 框架使用教程 AJAX篇
Oct 11 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
vue实现移动端触屏拖拽功能
Aug 21 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
PHP产生随机字符串函数
2006/12/06 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
php异常处理使用示例
2014/02/25 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python实现FM算法解析
2019/06/18 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
VC++笔试题
2014/10/13 面试题
《美丽的黄昏》教学反思
2014/02/28 职场文书
投资意向书
2014/07/30 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python