1、float.js
1
var delta=0.35;
2 var collection;
3 var closeB=false;
4 var isScrolling = false;
5 var bdy = ( document.documentElement && document.documentElement.clientWidth )?document.documentElement:document.body;
6
7
function floaters() 
{
8
this.items = [];
9
this.addItem = function(id,x,y) {
10 x = bdy.clientWidth/2 + x;
11 var newItem = {};
12 newItem.object = document.getElementById(id);
13 newItem.object.style.left = x + "px";
14 newItem.x = x;
15 newItem.y = y;
16
17 this.items[this.items.length] = newItem;
18
}
19
20 this.play = function() {
21 collection = this.items;
22 var scrollTimeout;
23 document.body.onscroll = function() {
24 isScrolling = true;
25 clearTimeout(scrollTimeout);
26 scrollTimeout = setTimeout(function() {
27 isScrolling = false;
28 },200);
29 }
30 setInterval('play()',30);
31 }
32
}
33
34 function play() {
35
36 if(isScrolling==true) {
37 return;
38 }
39
40 if( screen.width<=800 || closeB ) {
41 for(var i=0; i<collection.length; i++) {
42 collection[i].object.style.display = 'none';
43 }
44 return;
45 }
46
47 for(var i=0; i<collection.length; i++) {
48 var followObj = collection[i].object;
49 var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
50 var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
51
52
53
54 if( followObj.offsetLeft != (bdy.scrollLeft+followObj_x )) {
55 var dx = (bdy.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
56 dx = (dx>0?1:-1)*Math.ceil(Math.abs(dx));
57 tx = followObj.offsetLeft+dx;
58 followObj.style.left = tx + "px";
59 }
60
61
62 if( followObj.offsetTop != (bdy.scrollTop+followObj_y )) {
63 var dy = (bdy.scrollTop+followObj_y-followObj.offsetTop)*delta;
64 dy = (dy>0?1:-1)*Math.ceil(Math.abs(dy));
65 ty = followObj.offsetTop+dy;
66 followObj.style.top = ty + "px";
67 }
68
69 followObj.style.display = '';
70 }
71 }
72
73 function closeBanner() {
74 closeB=true;
75 return;
76 }
77
2、要浮動的層：
1<div id='AdLeftLayer' style='z-index: 10; position: absolute; width: 100px; height: 300px; left: 0px; top: 0px;'>
2 <object width="100" height="300"><param name="movie" value="/ad/flash/left.swf"></param><embed src="/ad/flash/left.swf" type="application/x-shockwave-flash" width="100" height="300"></embed></object>
3</div>
4<div id='AdRightLayer' style='z-index: 10; position: absolute; width: 100px; height: 300px; left: 0px; top: 0px;'>
5 <object width="100" height="300"><param name="movie" value="/ad/flash/right.swf"></param><embed src="/ad/flash/right.swf" type="application/x-shockwave-flash" width="100" height="300"></embed></object>
6</div>
7<div id='onlineservice' style='z-index: 10; position: absolute; width:115px; height:95px; left: 0px; top: 0px;'>
8 <a href='http://float2006.tq.cn/static.jsp?uin=8362404<ype=0' target='_blank'>
9 <img src='images/kefu.gif' border='0' >
10 </a>
11</div>
3、頁面代碼：
1 <script language="JavaScript" src="/js/float.js"></script>
2 <script language="javascript">
3 <!--
4 var theFloaters = new floaters();
5
6 theFloaters.addItem('AdLeftLayer', -490, 200 );
7 theFloaters.addItem('AdRightLayer', 390, 200 );
8 theFloaters.addItem('onlineservice', -500 , 80 );
9 theFloaters.play();
10 //-->
11 </script>
效果地址：http://www.jobhn.cn
因為使用了，
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
而且，要適應(yīng)Firefox，必須修改的網(wǎng)上原有代碼的兩個地方：
1、
1var bdy = ( document.documentElement && document.documentElement.clientWidth )?document.documentElement:document.body;
2、
1followObj.style.left = tx + "px";
2
3followObj.style.top = ty + "px";
posted on 2008-05-28 11:01
rox 閱讀(707)
評論(0) 編輯 收藏