随滚动条移动而浮动的层的代码 - JavaScript

笔记分类

网站编程(32)

C#/CSharp(40)

Asp.Net(15)

ASP(4)

PHP(4)

JavaScript(24)

CSS(6)

HTML(8)

WAP(6)

数据库(0)

MSSQL(18)

MySql(4)

Oracle(1)

网站运营(1)

搜索优化(2)

网站推广(1)

电脑ABC(10)

批处理(6)

网络杂文(2)

大杂烩(4)

搜索

最新更新

显示列表

随滚动条移动而浮动的层的代码2009-05-13

这里写了一个 JavsScript 类，只要实例化 FloatDiv 类就可以，指定要浮动的层的ID。
<!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> <div id="Ad" style="position:relative; width:300px; left:10px; top:50px;">Text</div> <div style="height:2000px;"></div> <script type="text/javascript"> function FloatDiv(id) { this.ID = id; this.ObjMove = document.getElementById(id); this.LastScrollY = 0; // 已经移动 FloatDiv.prototype.Move = function(obj) { var scrollTop; if (document.documentElement && document.documentElement.scrollTop) scrollTop = document.documentElement.scrollTop; else if (document.body) scrollTop = document.body.scrollTop; var percent; // 本次移动像素 percent = (scrollTop - obj.LastScrollY) * 0.1; // 每次移动10% if(percent > 0) percent = Math.ceil(percent); // 截掉小数，数字会变大 else percent = Math.floor(percent); // 截掉小数，数字会变小 obj.ObjMove.style.top = parseInt(obj.ObjMove.style.top) + percent + 'px'; obj.LastScrollY = obj.LastScrollY + percent; }; FloatDiv.prototype.Init = function(obj) { if (!obj.ObjMove) { alert('对象不存在'); return; } window.setInterval(this.BindInterval(this.Move, obj), 10); }; // 绑定参数，window.setInterval，不能指定参数，需要绑定 FloatDiv.prototype.BindInterval = function(funcName) { var args = []; for(var i = 1; i < arguments.length; i++) { args.push(arguments[i]); } return function() { funcName.apply(this, args); } }; } // 使用方法 // <div id="Ad" style="position:relative;">Text</div> var ad = new FloatDiv('Ad'); ad.Init(ad); </script> </body> </html>

返回摘要 | 分类(JavaScript) | 访问(14) | 编辑