zoukankan      html  css  js  c++  java
  • js-特效部分学习-拖拽效果

    一、客户区大小ClientWidth和ClientHeight

     <style>
            #box {
                 200px;
                height: 200px;
                background-color: aquamarine;
                margin: 20px;
                border: 20px solid red;
                padding:20px;
            }
        </style>
    
    </head>
    <body>
        <div id="box">
            
        </div>
    
    <script>
        var box = document.getElementById("box");
    
        //容器的大小: width + padding;
        console.log(box.clientWidth);
        console.log(box.clientHeight);
    </script>

    二、ScrollWidth/scrollHeight  scrollTop/scrollLeft(这两个是相对于定位了的父盒子而言的)

    三、拖拽盒子分析:

    思路分析:准备工作:先获得大盒子的(上图黑色边框内)====id(box)

                        再获得注册信息头部(上图红色边框内)====id(drop)

    //step:1鼠标按下这个注册信息头部(drop)后同时需要移动盒子

    drop.onmousedown=function(e){  //e为系统自带的属性

       e=e||window.event;   //e的兼容性(短路运算)

       鼠标与盒子之间的距离(a)=鼠标在页面之中的位置(b)-盒子距离页面边界的距离(c)

    var offsetX=e.pageX-box.offsetLeft;
    var offsetY= e.pageY-box.offsetTop;

    //同时移动

    document.onmousemove=function(e){

    //盒子在移动后的位置(e)=移动后的鼠标在页面之中的位置(d)-鼠标与盒子之间的距离(a)

    var x= e.pageX-offsetX;
    var y= e.pageY-offsetY;

    //接下来我们要判断盒子的位置不能够超出整个页面

      If(x<0){    //判断上边缘与左边缘

         x=0;

    }

    If(y<0){

    y=0;}

    }

    if(y>window.innerHeight-box.offsetHeight){   //判断下边缘与右边缘

    //innerHeight是页面可视区域的高度,window.innerHeight-box.offsetHeight得到的是盒子在页面之中可以移动的最大高度
        y=window.innerHeight-box.offsetHeight;
    }
    if(x>window.innerWidth-box.offsetWidth){
        x=window.innerWidth-box.offsetWidth;
    }

        box.style.left=x+”px”;

        box.style.top=y+”px”;

    }

    //鼠标抬起时盒子不再改变位置

     drop.onmouse=function(){

    document.onmousemove=null;

    }

    详见下面拖拽案例:

     <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .nav {
                height: 30px;
                background: #036663;
                border-bottom: 1px solid #369;
                line-height: 30px;
                padding-left: 30px;
            }
    
            .nav a {
                color: #fff;
                text-align: center;
                font-size: 14px;
                text-decoration: none;
    
            }
    
            .d-box {
                 400px;
                height: 300px;
                border: 5px solid #eee;
                box-shadow: 2px 2px 2px 2px #666;
                position: absolute;
                top: 40%;
                left: 40%;
                background-color: white;
    
                /* 不让文字被选中 */
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }
    
            .hd {
                 100%;
                height: 25px;
                background-color: #7c9299;
                border-bottom: 1px solid #369;
                line-height: 25px;
                color: white;
                cursor: move;
            }
    
            #box_close {
                float: right;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
    <div class="nav">
        <a href="javascript:;" id="register">注册信息</a>
    </div>
    <div class="d-box" id="d_box">
        <div class="hd" id="drop">注册信息 (可以拖拽)
            <span id="box_close">【关闭】</span>
        </div>
        <div class="bd"></div>
    </div>
    
    <script src="common.js"></script>
    <script>
        
    
        var box = document.getElementById("d_box");
        var drop = document.getElementById("drop");
    
    //鼠标再按下之后,同时移动
        drop.onmousedown=function(e){
            //e的兼容性(短路运算)
            e=e||window.event;
            //鼠标在盒子之中的距离=鼠标在页面之中的位置-盒子距离页面边界的距离
            var offsetX=e.pageX-box.offsetLeft;
            var offsetY= e.pageY-box.offsetTop;
            document.onmousemove=function(e){
            //盒子在移动后的位置=移动后的鼠标的在页面中的位置-鼠标在盒子之中的距离
                var x= e.pageX-offsetX;
                var y= e.pageY-offsetY;
                if(x<0){
                    x=0;
                }
                if(y<0){
                    y=0;
                }
    //            window.innerHeight浏览器可是区域的高度
                if(y>window.innerHeight-box.offsetHeight){
                    y=window.innerHeight-box.offsetHeight;
                }
                if(x>window.innerWidth-box.offsetWidth){
                    x=window.innerWidth-box.offsetWidth;
                }
                box.style.left=x+"px";
                box.style.top=y+"px";
            }
    
        }
        //当鼠标抬起的时候,盒子不再改变位置
        drop.onmouseup=function(){
            document.onmousemove=null;
        }
    </script>

    四、淘宝放大镜案例:

    思路分析:

    <div class="box" id="box">
        <div class="small">
            <img src="images/small.webp" width="350" alt=""/>
    
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="images/big.jpg" width="800" alt=""/>
        </div>
    </div>

    //准备工作:

    根据需要获得所有需要的元素标签:

    var box=document.getElementById("box");
    var small=box.children[0];
    var smallImg=small.children[0];
    var mask=small.children[1];
    var big=box.children[1];
    var bigImg=big.children[0];

    //step1:鼠标移动到小盒子之中时,显示小盒子中的蒙板,同时显示大图片

    //移出小盒子时,蒙板隐藏,大图片隐藏

    Small.onmouseover=function(){

      Mask.style.display=”block”;

      Big.style.display=”block”;

    }

    Small.onmouseout=function(){

    Mask.style.display=”none”;

    Big.style.display=”none”;

    }

    //step:鼠标放入盒子之中是让mask蒙板跟着移动

    Small.onmousemove=function(e){

    //var x=e.pageX-box.offsetLeft;

    //var y=e.pageX-box.offsetTop;

    //发现鼠标与mask的左上角位置保持一致

    //所以我们需要再减去蒙板宽高的一半,这样鼠标就能在蒙板的中间位置显示

    var x=e.pageX-box.offsetLeft-mask.offsetWidth/2;

    var y=e.pageX-box.offsetTop-mask.offsetHeight/2;

    if(x<=0){
        x=0;
    }
     if(y<=0){
         y=0;
     }
     //box设置了相对定位,所以是相对于box的宽度和高度而言的
    if(x>box.offsetWidth-mask.offsetWidth){
        x=box.offsetWidth-mask.offsetWidth;
    }
     if(y>box.offsetHeight-mask.offsetHeight)
     {
         y=box.offsetHeight-mask.offsetHeight;
     }
     mask.style.left=x+"px";
     mask.style.top=y+"px";

    step3:蒙板移动右边的大图片也跟着移动

    这里需要用到一个等式(原理是等比例移动)因为左右两个图片的大小是不一样的

    MaskX(蒙板左侧距小图片左侧的距离)/maxMaskImg(蒙板在小图片之中左右移动的最大距离)

    =bigImgX(大图片的左侧相对于它所在的盒子左侧移动的距离)(未知数)/maxBigImgX(大图片在它所在的盒子之中所能移动的最大宽度)

    var bigImgX=x*(bigImg.offsetWidth-big.offsetWidth)/(box.offsetWidth-mask.offsetWidth);
     var bigImgY=y*(bigImg.offsetHeight-big.offsetHeight)/(box.offsetHeight-mask.offsetHeight);

    bigImg.style.marginLeft=-bigImgX+"px";
    bigImg.style.marginTop=-bigImgY+"px";

    }

    五、滚动条案例分析:

    //准备工作:

    先获得所有需要的元素标签

    var box=document.getElementById("box");
    var content=document.getElementById("content");
    var scroll=document.getElementById("scroll");
    var bar=document.getElementById("bar");

    //1.计算滚动条的大小
    //    boxH/contentH=barH/scrollH
        var barH=box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
        bar.style.height=barH+"px";
        //判断如果盒子的高度超过盒子之中文字的高度,则滚动条的高度为0px
        if(box.offsetHeight>content.offsetHeight){
            bar.style.height="0px";
        }
        //2.拖拽滚动
        scroll.onmousedown=function(e){
            var offsetY= e.pageY-box.offsetTop-bar.offsetTop;
            document.onmousemove=function(e){
                var y= e.pageY-offsetY-box.offsetTop;
               if(y<0){
                   y=0
               }
                if(y>scroll.offsetHeight-bar.offsetHeight){
                    y=scroll.offsetHeight-bar.offsetHeight;
                }
                bar.style.top=y+"px";
                //3.文字跟随滚动
    //            barY/maxBarY=contentY/maxContent(等比例计算)
                //barY(滚动条距离外面定位了的父盒子box的距离)
                //maxContent (文字可移动的最大距离)=contentH(文字内容的高度)-boxH(盒子的高度)
                //maxBarY(滚动条可移动的最大距离)=scrollH(滚动栏轨道的高度)-barH(滚动条的高度)
                //contentY(文字距离外面定位了的父盒子box的距离)(未知数)
                var contentY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
                content.style.top=-contentY+"px"; //取反滚动条向下拖动,内容是向上移动的
            }
        }
        document.onmouseup=function(){
            document.onmousemove=null;
        }

    
    
    
  • 相关阅读:
    危险系数
    快速幂模板
    回文数字
    Echart图表使用
    http请求头中Referer的含义和作用
    有关程序员的时间管理
    数据库报错 java.sql.SQLException: The user specified as a definer ('root'@'%') does not exist
    sql中字符串替换
    前端获取数据库的datetime(时间戳) 转化成日期展示出来
    MySQL版本升级
  • 原文地址:https://www.cnblogs.com/xinjianheyi/p/5774560.html
Copyright © 2011-2022 走看看