zoukankan      html  css  js  c++  java
  • css变量完成拖动元素效果

    css变量可以有js进行设置,在move事件中,实时修改css变量,就可以实现元素的拖动效果。同时变量可以被复用,其他的元素可以使用此变量来得出别的效果。

    下面是css变量拖动效果的demo:

    .box{
         width: 100px;
         height: 100px;
         background-color: aquamarine;
         transform: translate(var(--mouse-x),var(--mouse-y));
    }
    <div class="box"></div>
    document.addEventListener('mousedown', e => {   
        //按下计算offset
        let rect = e.target.getBoundingClientRect();
        let offset = {
            left: e.clientX - rect.left,
            top: e.clientY - rect.top
        }
        //定义move函数
        let moveFunc = function(e){
            const docStyle = document.documentElement.style;
            docStyle.setProperty('--mouse-x', e.clientX - offset.left + 'px');
            docStyle.setProperty('--mouse-y', e.clientY - offset.top + 'px');
        }
        
        //添加move事件
        document.addEventListener('mousemove', moveFunc);
    
        //弹起解绑move事件
        document.addEventListener('mouseup', e => {
            document.removeEventListener('mousemove',moveFunc);
        })
    })
  • 相关阅读:
    Spring参数解析器HandlerMethodArgumentResolver
    Spring拦截器HandlerInterceptor和HandlerInterceptorAdapter
    3,turicreate入门
    2,turicreate入门
    flink 配置
    maven打包,带依赖jar
    python缓存所在目录
    docker基础
    yum安装
    python3 flink 安装
  • 原文地址:https://www.cnblogs.com/mengff/p/13534651.html
Copyright © 2011-2022 走看看