JS 封装浮动层通用类

最新推荐文章于 2025-07-18 11:41:55 发布

原创最新推荐文章于 2025-07-18 11:41:55 发布 · 799 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #div #string

本文介绍了一种使用JavaScript实现元素动态滑动效果的方法。通过自定义Glide类及其Start、Roll等方法，可以轻松地为网页元素添加平滑的水平或垂直滚动动画，并支持自定义方向和对齐方式。

由于没有找到JS获取当前类实例的方法，所以本类现在需要把实例的对象名传回来
如果哪位朋友有好的方法或者建议请联系我，谢谢。

function Glide()
{
    this.ID = document.getElementById(arguments[0]);//检索目标是否存在
    if(!this.ID)
   {
       alert('您要设置的"' + arguments[0] +'"初始化错误/r/n请检查标签ID设置是否正确!');
       this.ID = -1;
       return;
   }

   this.ObjectName="";
   this.SpeedTime=10;
   this.Direction = this.StarNum=this.IDDirection=0;

   this.PageWidth = window.screen.width;
   this.WindowHeight = window.screen.height;
   this.PageHeight =document.documentElement.scrollHeight + this.ID.scrollHeight
   this.DiffX = document.body.scrollLeft;

   if(typeof arguments[1] == "string")this.ObjectName = arguments[1];

}

//开始事件
Glide.prototype.Start=function()
{
    this.Roll();
}

//检查并运算
Glide.prototype.Roll=function()
{
    if(this.HStarNum == 5)
    {
        this.All();
    }
    else if(this.Direction==0||this.Direction==1)
    {
        this.Get();
        this.LeftRight();
    }
    else
    {
        this.Get();
        this.UPDown();
    }
}

//获取
Glide.prototype.Get=function()
{
    switch(this.Direction)
    {
        case 0://左边
            this.StarNum = document.documentElement.scrollLeft;
            break;
        case 1://右边
            this.StarNum = document.documentElement.scrollLeft + this.PageWidth - 20 -this.ID.offsetWidth;
            break;
        case 2://上边
            this.StarNum = document.documentElement.scrollTop;
            break;
        case 3://下边
            this.StarNum = (document.documentElement.scrollTop +(document.documentElement.clientHeight)-30);
            break;
    }
}

//上下动
Glide.prototype.UPDown=function()
{
    if(this.ID.style.top>this.PageHeight)
    {
         this.ID.style.top = (document.documentElement.scrollHeight + this.ID.scrollHeight) + "px";
    }
    else
    {
         this.ID.style.top = this.StarNum + "px";
    }
    this.ID.style.position="absolute";

    if(this.IDDirection==0)//居左
    {
        this.ID.style.left = document.documentElement.scrollLeft + "px";
    }
    else if(this.IDDirection==1)//居中
    {
        this.ID.style.left =(document.documentElement.scrollLeft + (this.PageWidth-this.ID.offsetWidth-20)/2 )+ "px";
    }
    else if(this.IDDirection==2) //居右
    {
        this.ID.style.left =(document.documentElement.scrollLeft + (this.PageWidth-this.ID.offsetWidth-20)) + "px";
    }
    setTimeout(this.ObjectName + '.Roll()',10);
}

//左右动
Glide.prototype.LeftRight=function()
{

    this.ID.style.left =this.StarNum;

    if(this.IDDirection==0)//居上
    {
        this.ID.style.top = document.documentElement.scrollTop +"px";
    }
    else if(this.IDDirection==1)//居中
    {
        this.ID.style.top =(document.documentElement.scrollTop + (document.documentElement.clientHeight-this.ID.offsetHeight-30)/2) + "px";
    }
    else if(this.IDDirection==2) //居下
    {
        this.ID.style.top =(document.documentElement.scrollTop + (document.documentElement.clientHeight-30)) + "px";
    }

    this.ID.style.position="absolute";
    setTimeout(this.ObjectName + '.Roll()',10);
}

使用代码演示
       var p = new Glide("t");
       p.ObjectName="p";
       p.Direction = 0;//设置DIV所在位置 0左，1右，2上，3下
       p.IDDirection = 1;//设置DIV对齐方式 0左，1中，2右
       p.Start();