JS 封装 浮动层通用类

由于没有找到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();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值