脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 左右两边 随屏滚动

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

 更新时间：2009年06月18日 00:04:51   作者：  
在不少的网站使用了这种技术，一般就是两边的一些三个小块排一起的广告。
复制代码 代码如下:

<!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函数中执行C#代码中的函数方法总结

    javaScript函数中执行C#代码中的函数方法总结

    这篇文章介绍了javaScript函数中执行C#代码中的函数方法总结，有需要的朋友可以参考一下
    2013-08-08
  • JS中prototype关键字的功能介绍及使用示例

    JS中prototype关键字的功能介绍及使用示例

    prototype 关键字可以为JS原有对象或者自己创建的类中添加方法或者属性。也可以实现继承，下面以实例的方式为大家详细介绍下
    2013-07-07
  • xWin之JS版(2-26更新)

    xWin之JS版(2-26更新)

    xWin之JS版(2-26更新)...
    2007-01-01
  • JS实现全屏预览F11功能的示例代码

    JS实现全屏预览F11功能的示例代码

    这篇文章主要介绍了JS实现全屏预览F11功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 微信小程序实现分享到朋友圈功能

    微信小程序实现分享到朋友圈功能

    这篇文章主要为大家详细介绍了微信小程序实现分享到朋友圈功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 利用JavaScript制作一个搞怪的兔子动画效果

    利用JavaScript制作一个搞怪的兔子动画效果

    又是一年新春之际，祝福大家兔年快乐！给大家介绍一个有趣的动效（兼容 IE），页面右下角有一只搞怪的兔子，鼠标在页面中悬停时，兔子会跟着做出不同的动作和表情，感兴趣的小伙伴可以了解一下
    2023-01-01
  • 一文学习JavaScript 使用误区

    一文学习JavaScript 使用误区

    在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)，这篇文章主要介绍了一文学习JavaScript 使用误区,需要的朋友可以参考下
    2023-02-02
  • JS+DIV实现鼠标划过切换层效果的方法

    JS+DIV实现鼠标划过切换层效果的方法

    这篇文章主要介绍了JS+DIV实现鼠标划过切换层效果的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • js生成二维码的示例代码

    js生成二维码的示例代码

    这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03
  • JS中SetTimeout和SetInterval使用初探

    JS中SetTimeout和SetInterval使用初探

    这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下
    2017-03-03

最新评论