拖拽特效

一、自定义动画

animation: flash 0.5s alternate infinite
/*自定义动画*/
@keyframes flash {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

延迟执行

start.style.animationDelay = delay + 's';

二、Underscore-min.js

Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。我们可以将它单独运用到任何一个页面，另外，Underscore还可以被使用在Node.js运行环境。
Underscore中有许多方法在JavaScript1.6中已经被纳入规范，因此在Underscore对象内部，会优先调用宿主环境提供的内置方法（如果宿主环境已经实现了这些方法），以此提高函数的执行效率。
Underscore默认使用_（下划线）来访问和创建对象。

三、offSet家族

3.1 offSet 自己的，用于获取元素尺寸

Snip20161230_2.png

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

3.2 offsetWidth 和 offsetHeight

获取对象自身的宽度和高度，包括内容、边框和内边距，即：offsetWidth = width + border + padding

div{ 
width: 300px; border-right:2px solid #ccc; padding:10px;
}
问：div的offsetWidth是多少？

注意：和 div.style.width 的区别，其只能获取到行内的数值

3.3 offsetLeft 和 offsetTop

距离第一个有定位的父级盒子左边和上边的距离，注意：**父级盒子必须要有定位，如果没有，则最终以body为准！

Paste_Image.png

总结：offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。

3.4 offsetParent

返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷：**

如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body； 如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。
注意：和parentNode的区别？

3.5 offsetXXX 和 style.XXX的区别

用offsetLeft和style.left来分析，其他的以此类推：

a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
   注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLeft) ---> 300
d) offsetLeft是只读的，而style.left是可读写；    
e) 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。

案例----弹性菜单效果.html
案例----如影随形效果.html

四、JS的事件对象 - event

4.1 在之前我们已经接触过很多事件，比如：onclick，ondbclick，onfocus, onmousedown，onmousemove...

btn.onclick = function(){ 
// 代码块
  } btn.onclick = function(event){
 // event就是当前事件的对象，简称事件对象
 }

只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。比如：IE6-8只能通过window.event获取事件对象，而其他的则可以直接获取。通常，考虑兼容性的写法：

var event = event || window.event;

4.2 event 常见属性

4.3 pageX/pageY、screenX/screenY、clientX/clientY的区别

screenX/screenY 是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸

pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;
clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。

4.4 JS常见事件

onmousemove** 当鼠标在当前元素中移动的时候触发，鼠标只要移动一像素就会执行的事件，频率非常高；
onmouseover 当鼠标进入当前元素时触发，只会被触发一次
onmouseup当鼠标弹起的时候触发
onmousedown 当鼠标按下的时候触发

4.5 防止拖动时选中内容

防止拖拽的时候选中拖拽区域中的内容，代码如下：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

案例1----商品放大效果.

HTML结构
<div id="box">
        <div id="small_box">
            ![](images/pic001.jpg)
            <span id="mask"></span>
        </div>
        <div id="big_box">
            ![](images/pic01.jpg)
        </div>
    </div>

    <div id="list">
        ![](images/pic0001.jpg)
        ![](images/pic0002.jpg)
        ![](images/pic0003.jpg)
    </div>

    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>

CSS样式
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        img{
            vertical-align: top;
        }

        #box{
            width: 350px;
            height: 350px;
            /*background-color: red;*/
            margin: 100px 0 0 100px;

            position: relative;
        }

        #small_box{
            width: 100%;
            height: 100%;
            border:1px solid #e8e8e8;

            position: relative;
            cursor: move;
        }

        #big_box{
            width: 600px;
            height: 600px;
            border:1px solid #e8e8e8;

            position: absolute;
            top:0;
            left: 360px;

            overflow: hidden;
            display: none;
        }

        #mask{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 0, .4);

            position: absolute;
            left: 0;
            top:0;

            display: none;
        }

        #list{
            margin: 20px 0 0 100px;
        }

        p{
            height: 40px;
        }
    </style>

JS特效
<script>
    window.onload = function(){
        // 1. 获取需要的标签
        var box = $('box');
        var small_box = $('small_box');
        var big_box = $('big_box');
        var mask = $('mask');
        var big_img = big_box.children[0];
        var all_img = $('list').children;

        // 2. 监听鼠标进入
        small_box.onmouseover = function(){
            // 2.1 显示隐藏的标签
            mask.style.display = 'block';
            big_box.style.display = 'block';

            // 2.2 监听鼠标的移动
            small_box.onmousemove = function(event){
                var event = event || window.event;

                // 2.2.1 求出坐标
                var pointX = event.pageX - box.offsetLeft - mask.offsetWidth * 0.5;
                var pointY = event.pageY - box.offsetTop -  mask.offsetHeight * 0.5;

                // 2.2.2 碰撞检测
                if(pointX < 0){
                    pointX = 0;
                }else if(pointX >= small_box.offsetWidth - mask.offsetWidth){
                    pointX = small_box.offsetWidth - mask.offsetWidth - 2;
                }

                if(pointY < 0){
                    pointY = 0;
                }else if(pointY >= small_box.offsetHeight - mask.offsetHeight){
                    pointY = small_box.offsetHeight - mask.offsetHeight - 2;
                }

                // 2.2.3 让黄色盒子动起来
                mask.style.left = pointX + 'px';
                mask.style.top = pointY + 'px';

                // 2.2.4 大图要走起来
                // 小盒子中 10m  大盒子中的图片要走多少米?
                // smallX / bigX = smallBoxW / bigBoxW
                // bigX = smallX /(smallBoxW / boxBoxW);
                big_img.style.left = -pointX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';
                big_img.style.top = -pointY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';

            }

            // 3 隐藏标签
            small_box.onmouseout = function(){
                mask.style.display = 'none';
                big_box.style.display = 'none';
            }
        }

        // 3. 列表图片处理
       /* for(var i=0; i<all_img.length; i++){
            var item = all_img[i];
            item.index = i+1;

            item.onmouseover = function(){
                small_box.children[0].src = 'images/pic00'+ this.index +'.jpg';
                big_img.src = 'images/pic0'+ this.index +'.jpg';
            }
        }*/

        for(var i=0; i<all_img.length; i++){
            var item = all_img[i];
            (function(index){
                item.onmouseover = function(){
                    small_box.children[0].src = 'images/pic00'+ index +'.jpg';
                    big_img.src = 'images/pic0'+ index +'.jpg';
                }
            })(i+1);
        }

    }

    function $(id){
        return typeof id === 'string'? document.getElementById(id): id;
    }
</script>

案例2----滚动条效果

HTML结构
<div id="progress">
        <div id="progress_bar">
            <div id="progress_bar_fg"></div>
            <span id="progress_bar_mask"></span>
        </div>
        <div id="progress_value">0%</div>
    </div>

CSS样式
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        #progress{
            width: 1000px;
            height: 30px;
            line-height: 30px;
            /*background-color: #dddddd;*/
            margin: 100px auto;
        }

        #progress_bar{
            width: 900px;
            height: 100%;
            background-color: #e8e8e8;
            border-radius: 5px;
            float: left;
            margin-right: 10px;

            position: relative;
        }

        #progress_bar_fg{
            width: 0;
            height: 100%;
            background-color: orangered;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        #progress_bar_mask{
            width: 20px;
            height: 40px;
            background-color: orangered;
            border-radius: 5px;

            position: absolute;
            left: 0;
            top: -5px;

            cursor: pointer;
        }

        #progress_value{
            color: orangered;
            font-size: 16px;
        }
    </style>

JS特效
<script>
    window.onload = function(){
        // 1. 获取需要的标签
        var progress = document.getElementById('progress');
        var progress_bar = progress.children[0];
        var progress_value = progress.children[1];
        var progress_bar_fg = progress_bar.children[0];
        var progress_bar_mask = progress_bar.children[1];

        // 2. 监听鼠标的按下事件
        progress_bar_mask.onmousedown = function(event){
            var event = event || window.event;

            // 2.1 获取起始位置
            var startX = event.clientX - this.offsetLeft;

            // 2.2 监听移动事件
            document.onmousemove = function(event){
                var event = event || window.event;
                // 2.2.1 求出结束的位置
                var endX = event.clientX - startX;

                // 2.2.2 边界值处理
                if(endX < 0){
                    endX = 0;
                }else if(endX >= progress_bar.offsetWidth - progress_bar_mask.offsetWidth){
                    endX = progress_bar.offsetWidth - progress_bar_mask.offsetWidth;
                }

                // 2.2.3 让标移动起来
                progress_bar_fg.style.width = endX + 'px';
                progress_bar_mask.style.left = endX + 'px';

                // 2.2.4 设置比例
                progress_value.innerHTML = parseInt(endX / ( progress_bar.offsetWidth - progress_bar_mask.offsetWidth)*100) + '%';
                return false;
            };

            // 3.松开鼠标
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };

            return false;
        }
    }
</script>

示图

五、代码的执行-同步和异步

5.1 同步执行

下一行代码的执行必须等待上一个行代码执行完毕再执行；或者说上一行未执行完毕下一行不能执行。

5.2 异步执行

代码各自执行各自的，互相独立。

5.3 初始化执行

网页一发布就执行的代码称之为初始化中执行；初始化也是同步执行的一种。

5.4 总结

所有被鼠标触发的事件都可以认为是异步，互相独立。还有一个需要注意的就是定时器中的代码都是异步的，也是互相独立。

最后编辑于：2018.04.03 19:16:19

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,245评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,749评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,960评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,575评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,668评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,670评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,664评论 3赞 415
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,422评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,864评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,178评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,340评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,015评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,646评论 3赞 323
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,265评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,494评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,261评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,206评论 2赞 352

拖拽特效

一、自定义动画

延迟执行

二、Underscore-min.js

三、offSet家族

3.1 offSet 自己的，用于获取元素尺寸

3.2 offsetWidth 和 offsetHeight

3.3 offsetLeft 和 offsetTop

距离第一个有定位的父级盒子左边和上边的距离，注意：**父级盒子必须要有定位，如果没有，则最终以body为准！

总结：offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。

3.4 offsetParent

3.5 offsetXXX 和 style.XXX的区别

四、JS的事件对象 - event

4.1 在之前我们已经接触过很多事件，比如：onclick，ondbclick，onfocus, onmousedown，onmousemove...

4.2 event 常见属性

4.3 pageX/pageY、screenX/screenY、clientX/clientY的区别

4.4 JS常见事件

4.5 防止拖动时选中内容

案例1----商品放大效果.

案例2----滚动条效果

五、代码的执行-同步和异步

5.1 同步执行

5.2 异步执行

5.3 初始化执行

5.4 总结

推荐阅读更多精彩内容