js-特效部分学习-拖拽效果

一、客户区大小ClientWidth和ClientHeight

 <style>

        #box {

            width: 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 {

            width: 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 {

            width: 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="data:images/small.webp" width="350" alt=""/>

        <div class="mask"></div>

    </div>

    <div class="big">

        <img src="data: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;

    }

js-特效部分学习-拖拽效果的更多相关文章

js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
原生js实现模块来回拖拽效果
代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件具体代码如下: &l ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
用JS实现版面拖拽效果
类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件通过获取鼠标的坐标(clientX,clientY)来改变面板的位置注意:面板使用绝对定位方式,是以左上角为参考点, ...

随机推荐

winform建立非矩形窗体
非规则窗体可能会需要加的功能代码: 1:因为没有了最上边的标题栏,所以需要加窗体鼠标拖动功能,在Form里面加如下代码: #region 移动窗体 // 移动窗体 const int WM_NCLBU ...
javascript URI的编码
用encodeURIComponent,但是不清楚她和encodeURI的区别, w3school 对其的解释: encodeURIComponent() 函数可把字符串作为 URI 组件进行编码.( ...
【转】web测试总结
1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#￥%……&*?[]{}”特别要注意单引号和&符号.禁止直接输入特殊字符时,使用“粘贴.拷 ...
jQuery 中 data 方法的实现原理
前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...
判断 0 和 '' 以及 empty null false的关系
if('safdasefasefasf'==0) { echo "该字符串转换为数字等于 0 <br/>"; } //output:该字符串转换为数字等于零. 这是 ...
关于new/delete、malloc/free的内存泄漏检测
情况一 new/delete 内存泄漏 1.在MFC中可以每一个cpp文件的头部添加以下一段宏来检测new申请而没用free释放的内存泄漏 #ifdef _DEBUG #define new DEBU ...
IIS7中配置FastCGI运行PHP
环境说明: 操作系统:使用windows 2008 server 64位系统,IIS7.5PHP版本:官方下载PHP 5.4.16 VC9 x86 Non Thread SafeZIP版本.PHP路径 ...
Ubuntu14.04环境下Samba报错排错过程
排错的方法和思路非常重要,日志非常非常非常非常重要!!! 搭建好Samba之后,windos访问一直下面这个错误,然后傻逼一样一直百度百度,一弄又是几天,但是经过自己一步一步的排错,弄成功之后,那心情 ...
济南学习D2T1__折纸带
他[问题描述]一张长度为n的纸带,我们可以从左至右编号为0 −n(纸带最左端标号为0) .现在有m次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带的长度是多少.[输入格式]第一行两个数字n, ...
使用signal、setjmp、longjmp进行Linux/Android C异常处理
#include <stdio.h> #include <stdlib.h> #include <signal.h> #include <setjmp.h&g ...

js-特效部分学习-拖拽效果

js-特效部分学习-拖拽效果的更多相关文章

随机推荐

热门专题