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

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

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;
    }
});
目录
相关文章
|
3月前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
5月前
|
小程序
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
69 0
|
6月前
|
JavaScript 前端开发
技术好文共享:移动端事件(二)——移动端滑屏切换的幻灯片
技术好文共享:移动端事件(二)——移动端滑屏切换的幻灯片
25 0
|
7月前
短视频 TXUGCRecord工具如何全屏显示
短视频 TXUGCRecord工具如何全屏显示
52 0
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
小程序 JavaScript
微信小程序图片放大预览效果的实现,轮播图点击放大预览
微信小程序图片放大预览效果的实现,轮播图点击放大预览
1056 0
|
小程序 开发者
微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义(有图有源码)
微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义(有图有源码)
195 0
|
XML Android开发 数据格式
直播视频网站源码,按钮背景点击按下变色
直播视频网站源码,按钮背景点击按下变色
651 0
|
JavaScript 前端开发
仿抖音短视频系统源码,点击实现波纹效果
仿抖音短视频系统源码,点击实现波纹效果
1867 0
短视频商城源码,两种方式实现点击出现弹窗显示
短视频商城源码,两种方式实现点击出现弹窗显示
227 0