zoukankan      html  css  js  c++  java
  • 验证码拖动!!!!!!!!待更新

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
        <style>
            .father{
                width: 400px;
                height: 50px;
                background-color: red;
                margin: 300px auto;
                position: relative;
            }
            .son{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 40px;
                background-color: purple;
            }
            .mask{
                width: 0;
                height: 100%;
                background-color: #336699;
                /*position: absolute;
                top: 0;
                left: 0;*/
            }
        </style>
        <script src="../public.js"></script>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
        <div class="mask"></div>
    </div>
    </body>
    <script>
        var father=document.querySelector(".father")
        var son=document.querySelector(".son")
        var mask=document.querySelector(".mask")
        addEvent(son,"mousedown",down)
        function down(eve) {
            var e1=eve||window.event;
            var leftVal = e1.clientX - son.offsetLeft;
            console.log(e1.clientX)//第一次按下去,鼠标相对于可是页面的X,是一直不会变化的。
            console.log(son.offsetLeft)//son相对于包含快的距离;
        addEvent(document,"mousemove",move)
        function move(eve) {
            var e2=eve||window.event
            console.log(e2.clientX)
            son.style.left=e2.clientX- leftVal +"px"
            if(e2.clientX- leftVal<0){
                son.style.left="0px"
            }
            else if(e2.clientX- leftVal>360){
                son.style.left="360px"
            }
            mask.style.width = son.style.left;
            window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();//清除拖动,防止有时候鼠标弹起来还在拖动。
    
        }
        addEvent(document,"mouseup",up)
            function up(eve) {
                var e3=eve||window.event;
                removeEvent(document,"mousemove",move)
            }
        }
    
    
    </script>
    </html>
  • 相关阅读:
    微信小程序路由跳转方式
    事务的隔离级别 乐观锁和悲观锁 f查询 q查询
    手机短信验证
    用git来操作项目
    git使用
    redis数据库 Python使用redis
    DRF框架:接口 ,restfui接口规范,基于restful规范的原生Django接口,Postman接口工具
    vue初识
    Win10玩游戏时听歌音量忽大忽小
    ASP.NET Core 2.0 WebApi全局配置及日志
  • 原文地址:https://www.cnblogs.com/hy96/p/11431086.html
Copyright © 2011-2022 走看看