• js按钮浮动随手指方向移动而移动


        window.document.getElementById("moveDIV").addEventListener("touchmove", function (event) {
                
                event.preventDefault();
                
                if (event.targetTouches.length == 1) {
                    var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
                 
                    if(touch.pageX + $("#moveDIV").width() > $(window).innerWidth()){
                        
                         window.document.getElementById("moveDIV").style.left = ($(window).innerWidth() - $("#moveDIV").width()) + 'px';
                        
                    }else if(touch.pageX < $("#moveDIV").width()){
                        
                        window.document.getElementById("moveDIV").style.left = 0 + 'px';
                        
                    }else{
                        
                        window.document.getElementById("moveDIV").style.left = touch.pageX + 'px';
                    }
                    
                   if(touch.pageY + $("#moveDIV").height() > $(window).innerHeight()){
                       
                           window.document.getElementById("moveDIV").style.top = ($(window).innerHeight() - $("#moveDIV").height())+ 'px';
                           
                   }else if(touch.pageY < $("#moveDIV").height()){
                        
                        window.document.getElementById("moveDIV").style.top = 0 + 'px';
                        
                    }else {
                       
                           window.document.getElementById("moveDIV").style.top = touch.pageY + 'px';
                           
                   }
                }
            },false)

  • 相关阅读:
    剖析Vue原理&实现双向绑定MVVM
    js处理异步的几种方式
    【转】从Vue.js源码看异步更新DOM策略及nextTick
    js中获取css样式属性值
    原生JS节点操作
    圣杯布局和双飞翼布局的作用和区别
    vue自定义插件-弹框
    MongoDB 数据库创建删除、表创建删除、数据增删改查
    Vue组件之间数据交互与通信
    Vue中的计算属性与$watch
  • 原文地址:https://www.cnblogs.com/myRain/p/6046892.html
Copyright © 2020-2023  润新知