JS 封装 浮动层通用类

本文介绍了一种使用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();
源码地址: https://pan.quark.cn/s/a4b39357ea24 欧姆龙触摸屏编程软件MPTST 5.02是专门为欧姆龙品牌的工业触摸屏而研发的编程解决方案,它赋予用户在直观界面上构建、修改以及排错触摸屏应用程序的能力。 该软件在工业自动化领域具有不可替代的地位,特别是在生产线监视、设备操控以及人机互动系统中发挥着核心作用。 欧姆龙MPTST(Machine Process Terminal Software Touch)5.02版本配备了多样化的功能,旨在应对不同种的触摸屏项目要求。 以下列举了若干核心特性:1. **图形化编程**:MPTST 5.02采用图形化的编程模式,允许用户借助拖拽动作来设计屏幕布局,设定按钮、滑块、指示灯等组件,显著简化了编程流程,并提升了工作效率。 2. **兼容性**:该软件能够适配欧姆龙的多个触摸屏产品线,包括CX-One、NS系列、NJ/NX系列等,使用户可以在同一个平台上完成对不同硬件的编程任务。 3. **数据通信**:MPTST 5.02具备与PLC(可编程逻辑控制器)进行数据交互的能力,通过将触摸屏作为操作界面,实现生产数据的显示与输入,以及设备状态的监控。 4. **报警与事件管理**:软件中集成了报警和事件管理机制,可以设定多种报警标准,一旦达到预设条件,触摸屏便会展示对应的报警提示,助力操作人员迅速做出响应。 5. **模拟测试**:在设备实际连接之前,MPTST 5.02支持用户进行脱机模拟测试,以此验证程序的正确性与稳定性。 6. **项目备份与恢复**:为了防止数据遗失,MPTST 5.02提供了项目文件的备份及还原功能,对于多版本控制与团队协作具有显著价值。 7. **多语言支持**:针对全球化的应...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值