javascript 一段左右兩邊隨屏滾動(dòng)的代碼
更新時(shí)間:2009年06月18日 00:04:51 作者:
在不少的網(wǎng)站使用了這種技術(shù),一般就是兩邊的一些三個(gè)小塊排一起的廣告。
復(fù)制代碼 代碼如下:
<!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>一段左右兩邊隨屏滾動(dòng)的代碼</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四個(gè)方向無間隙滾動(dòng)合集(多瀏覽器IE,firefox兼容)
- javascript用DIV模擬彈出窗口_窗體滾動(dòng)跟隨
- Javascript模擬scroll滾動(dòng)效果腳本
- 不通過JavaScript實(shí)現(xiàn)的自動(dòng)滾動(dòng)視差效果
- javascript 單行文字向上跑馬燈滾動(dòng)顯示
- 圖片與JavaScript配合做出個(gè)性滾動(dòng)條
- javascript 模擬Marquee文字向左均勻滾動(dòng)代碼
- javascript 實(shí)現(xiàn)滾動(dòng)效果代碼整理
- javascript 獲取頁面的高度及滾動(dòng)條的位置的代碼
- javascript上下左右定時(shí)滾動(dòng)插件
- JavaScript實(shí)現(xiàn)頁面滾動(dòng)圖片加載(仿lazyload效果)
- Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
- javascript 另一種圖片滾動(dòng)切換效果思路
- 實(shí)現(xiàn)網(wǎng)頁內(nèi)容水平或垂直滾動(dòng)的Javascript代碼
- javascript jscroll模擬html元素滾動(dòng)條
- javascript改變position值實(shí)現(xiàn)菜單滾動(dòng)至頂部后固定
- javascript實(shí)現(xiàn)文字圖片上下滾動(dòng)的具體實(shí)例
- 基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放
相關(guān)文章
JavaScript中在光標(biāo)處插入添加文本標(biāo)簽節(jié)點(diǎn)的詳細(xì)方法
本文主要介紹了JavaScript中在光標(biāo)處插入添加文本標(biāo)簽節(jié)點(diǎn)的詳細(xì)方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03layui實(shí)現(xiàn)登陸界面驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)登陸界面驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11js常用系統(tǒng)函數(shù)用法實(shí)例分析
這篇文章主要介紹了js常用系統(tǒng)函數(shù)用法,實(shí)例分析了escape、parseInt、parseFloat、isNaN、isFinite等函數(shù)的用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01用Javascript評(píng)估用戶輸入密碼的強(qiáng)度實(shí)現(xiàn)代碼
用Javascript評(píng)估用戶輸入密碼的強(qiáng)度實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-11-11js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法,實(shí)例分析了JavaScript實(shí)現(xiàn)MIPS乘法模擬的運(yùn)算技巧,需要的朋友可以參考下2015-04-04微信小程序webview實(shí)現(xiàn)長按點(diǎn)擊識(shí)別二維碼功能示例
這篇文章主要介紹了微信小程序webview實(shí)現(xiàn)長按點(diǎn)擊識(shí)別二維碼功能,結(jié)合實(shí)例形式分析了webview二維碼識(shí)別相關(guān)操作技巧,需要的朋友可以參考下2019-01-01