zoukankan      html  css  js  c++  java
  • div跟随手指滑动

    follow(item)
    function follow(target){
        //定位自动偏移问题在target元素再套一个父元素可解决
        var startx,starty,left_start,top_start,movex,movey,X,Y;
        var it = document.querySelector(".it");
        target.addEventListener("touchstart",fn) //手指触摸
        target.addEventListener("touchmove",fun) //手指持续滑动
    
        function fn(e){
            startx = e.touches[0].pageX;
            starty = e.touches[0].pageY;
        
            top_start = item.offsetTop; //获取当前元素距顶部距离
            left_start = item.offsetLeft; //获取当前元素距左边部距离
        }
    
        function fun(e){
            movex = e.touches[0].pageX;
            movey = e.touches[0].pageY;
            X = movex - startx + parseInt(left_start);
            Y = movey - starty + parseInt(top_start);
        
            target.style.top= Y + "px"
            target.style.left= X + "px"
            //限制元素在某个范围内
    
            // if(parseInt(target.offsetTop) >= 250){
            //     target.style.top= 250 + "px";
            // }
            // if(parseInt(target.offsetTop) <= -140){
            //     target.style.top= -140 + "px";
            // }
        }
    }
  • 相关阅读:
    less css用法思维导图
    javascript模块化编程规范
    行高:line-height图文解析
    CSS细节
    Emmet
    常见的浏览器兼容问题
    一条在没有水的环境下坚持了四年生存下来的鱼
    纪念:一高那些年
    水墨青花
    float浮动
  • 原文地址:https://www.cnblogs.com/xm16/p/10266820.html
Copyright © 2011-2022 走看看