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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
干部考核工作总结
2015/08/12 职场文书