前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >直播视频网站源码,实现移动端的按钮拖动

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

原创
作者头像
yunbaokeji柯基
修改2020-10-26 17:47:54
1.1K0
修改2020-10-26 17:47:54
举报
文章被收录于专栏:直播知识

Html

代码语言:javascript
复制
<button id="btnFS" class="btn btn-success" >开始体验</button>

Js

代码语言:javascript
复制
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;
    }
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档