直播视频网站源码,实现移动端的按钮拖动

简介: 直播视频网站源码,实现移动端的按钮拖动

Html

<button id="btnFS" class="btn btn-success" >开始体验</button>

Js

var flag, btnEle, cur, nx, ny, dx, dy, x, y; 
flag = false;
btnEle = document.getElementById("btnFS"); 
cur = {x: 0,y: 0 };
function down() {
    var touch = event.touches[0];
    flag = true;
    cur.x = touch.clientX;
    cur.y = touch.clientY;
    dx = btnEle.offsetLeft;
    dy = btnEle.offsetTop;
}
function move(){
    if(flag){
        var touch = event.touches[0];
        nx = touch.clientX - cur.x;
        ny = touch.clientY - cur.y;
        x = dx + nx;
        y = dy + ny;
        if(Math.abs(nx)) {
             event.preventDefault();
        }
        if (x<=0) {
            x = 0;
        } else if(x>=btnEle.parentNode.offsetWidth - btnEle.offsetWidth) {
            x = btnEle.parentNode.offsetWidth - btnEle.offsetWidth;
        } else {
            x = x;
        }

        if (y<=0) {
            y = 0;
        } else if(y>=btnEle.parentNode.offsetHeight - btnEle.offsetHeight) {
            y = btnEle.parentNode.offsetHeight - btnEle.offsetHeight;
        } else {
            y = y;
        }
        btnEle.style.left = x +"px";
        btnEle.style.top = y +"px";
    }
}
function end(){
    flag = false; 
}
btnEle.addEventListener("touchstart",function(){
    down();
},false);
btnEle.addEventListener("touchmove",function(){
    move();
},false);
btnEle.addEventListener("touchend",function(){
    end();
},false);
btnEle.addEventListener("click", function(event) {
    if (!$scope.isFull) {
        document.querySelector('.col-md-3').style.display = 'none';
        document.querySelector('.invite').style.display = 'none';
        document.querySelector('#matters').classList = 'hidden';
        this.innerText = "退出体验";
        $scope.isFull = true;
    } else {
        document.querySelector('.col-md-3').style.display = 'block';
        document.querySelector('.invite').style.display = 'block';
        document.querySelector('#matters').classList = 'visible-xs visibile-sm';
        this.innerText = "开始体验";
        $scope.isFull = false;
    }
});
目录
相关文章
|
机器学习/深度学习 算法 计算机视觉
YOLOv5改进 | 损失函数篇 | 最新ShapeIoU、InnerShapeIoU损失助力细节涨点
YOLOv5改进 | 损失函数篇 | 最新ShapeIoU、InnerShapeIoU损失助力细节涨点
565 1
|
设计模式 存储 安全
八种创建单例模式的方式-懒汉式与饿汉式及枚举
八种创建单例模式的方式-懒汉式与饿汉式及枚举
288 2
|
Linux Shell 网络安全
Linux命令之less
Linux命令 less
329 1
|
监控 Java 调度
探秘Java虚拟机(JVM)性能调优:技术要点与实战策略
【6月更文挑战第30天】**探索JVM性能调优:**关注堆内存配置(Xms, Xmx, XX:NewRatio, XX:SurvivorRatio),选择适合的垃圾收集器(如Parallel, CMS, G1),利用jstat, jmap等工具诊断,解决Full GC问题,实战中结合MAT分析内存泄露。调优是平衡内存占用、延迟和吞吐量的艺术,借助VisualVM等工具提升系统在高负载下的稳定性与效率。
231 1
|
11月前
|
存储 算法 Java
聊聊jvm的内存结构, 以及各种结构的作用
【10月更文挑战第27天】JVM(Java虚拟机)的内存结构主要包括程序计数器、Java虚拟机栈、本地方法栈、Java堆、方法区和运行时常量池。各部分协同工作,为Java程序提供高效稳定的内存管理和运行环境,确保程序的正常执行、数据存储和资源利用。
328 10
|
机器学习/深度学习 人工智能 算法
量子计算与人工智能的融合:智能计算的新篇章
【9月更文挑战第22天】量子计算与人工智能的融合正开启智能计算的新篇章。通过利用量子计算的独特优势,人工智能领域将迎来前所未有的性能提升和全新可能性。随着技术的不断进步和应用场景的不断拓展,我们有理由相信,量子计算与人工智能的融合将引领一场科技革命,为人类社会的发展和进步做出更大贡献。
|
9月前
|
供应链 搜索推荐 数据挖掘
跨境电商圣诞节选品大揭秘:看板如何帮助提升选品效率?
本文探讨了跨境电商在圣诞期间的选品策略,涵盖利用大数据平台、社交媒体监测、竞争对手分析及行业趋势研究等方法。同时介绍了选品流程优化及板栗看板在选品工作中的应用,帮助卖家精准选品,提升销售业绩。
跨境电商圣诞节选品大揭秘:看板如何帮助提升选品效率?
|
数据采集 存储 数据处理
使用Python爬取豆瓣电影影评:从数据收集到情感分析
本文演示如何使用Python爬虫获取豆瓣电影《肖申克的救赎》的影评数据并进行情感分析。首先,安装requests、BeautifulSoup、pandas和TextBlob库。接着,编写爬虫抓取评论的用户名、评分和内容,存储为DataFrame。然后,利用TextBlob进行情感分析,得到情感分数。此方法有助于分析用户对电影的反馈。
|
存储 自然语言处理 开发者
通用性与灵活性对大模型的影响
通用性与灵活性对大模型的影响
|
存储 算法 Java
12张图一次性搞懂高性能并发容器ConcurrentLinkedQueue
12张图一次性搞懂高性能并发容器ConcurrentLinkedQueue