JavaScript常用方法总结——利用脚本封装

最新推荐文章于 2025-01-11 13:28:33 发布

braveii

最新推荐文章于 2025-01-11 13:28:33 发布

阅读量409

点赞数

分类专栏： javascript 文章标签： javascript 脚本 function border 数据结构 email

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现网站悬浮广告的方法。通过定义水平和垂直对齐方式、平滑移动等属性，使得悬浮广告能够随用户的滚动而移动，并保持在预设的位置上。适用于不同浏览器环境。

利用脚本封装，方便实现网站悬浮广告

下面是JS脚本(floatdiv.js)
/*======================================================================
浮动块支持脚本
DESIGN BY : 彭国辉
DATE: 2004-02-26
SITE: http://kacarton.yeah.net/
BLOG: http://blog.youkuaiyun.com/nhconch
EMAIL: kacarton@sohu.com

文章为作者原创，转载前请先与本人联系，转载请注明文章出处、保留作者信息，谢谢支持！
======================================================================*/

var alLeft = 0, alCenter = 1, alRight = 2; //水平对齐方式
var alTop = 0, alMiddle = 1, alBottom = 2; //垂直对齐方式

var f = new Array();
var cnt = 0;

function floatDiv(objId, align, vAlign, x, y, smooth)
{
/*浮动块对象
数据结构：
objId：对象ID
align：水平对齐方式，枚举型
vAlign：垂直对齐方式，枚举型内容
x, y： xy座标，整型
smooth：平滑移动，布尔型
*/
this.objId = objId;
this.align = align;
this.vAlign = vAlign;
this.x = x;
this.y = y;
this.smooth = smooth;
}

function addDiv(objId, align, vAlign, x, y, smooth)
{ //添加浮动块
f[cnt++] = new floatDiv(objId, align, vAlign, x, y, smooth);
}

if (document.layers)
{
for (var i=0; i<f.length; i++)
{
var objId = f[i].objId;
switch (f[i].align)
{
case alLeft : objX = pageXOffset + f[i].x; break;
case alCenter: objX = pageXOffset + Math.ceil((window.innerWidth-objId.width)/2) + f[i].x; break;
case alRight : objX = pageXOffset + window.innerWidth - f[i].x - document.objId.width; break;
}
switch (f[i].vAlign)
{
case alTop : objY = pageYOffset + f[i].y; break;
case alMiddle: objY = pageYOffset + Math.ceil(window.innerHeight/2) + f[i].y; break;
case alBottom: objY = pageYOffset + window.innerHeight - f[i].y - document.objId.height; break;
}
if (t[i].smooth) smoothMove(f[i].objId, objX, objY);
else
{
document.objId.left = objX;
document.objId.top = objY;
}
}
}

setTimeout("floatMove();",50);
}

function smoothMove(obj, x, y)
{
var percent;
if (document.all)
{
percent = .1 * (x - obj.style.pixelLeft);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
obj.style.pixelLeft += percent;

percent = .1 * (y - obj.style.pixelTop);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
obj.style.pixelTop += percent;
}
if (document.layers)
{
percent = .1 * (x - document.objId.left);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
document.objId.left += percent;

percent = .1 * (y - document.objId.top);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
document.objId.top += percent;
}
}

setTimeout("floatMove();",50);

调用例子：

[原创]自己定义的简单方法验证表单数据
方法很简单，先是定义好要验证的数组比如:
check_array[0]= new Array(title,留言主题不能为空!);
然后判断，错误的就提示定义的内容，代码如下:

//定义获取表单元素；
function $()
{
var elements = new Array();

for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);

if (arguments.length == 1)
return element;

elements.push(element);
}

return elements;
}

function checkform()
{
//定义要验证的表单数组；
var check_array=new Array();
check_array[0]= new Array("title","留言主题不能为空!");
check_array[1]= new Array("name","姓名不能为空!");
check_array[2]= new Array("email","电子邮件不能为空!");
check_array[3]= new Array("phone","电话不能为空!");
check_array[4]= new Array("note","留言内容不能为空!");

//验证定义表单是否为空;
for(var i=0;i<check_array.length;i++)
{
if($(check_array[i][0]).value=="")
{
alert(check_array[i][1]);
$(check_array[i][0]).focus();
return false;
}
}

}
</script>

转自：http://www.worktool.cn/Javascript/ZongHeLei/2008-09/70p4.htm