拖拽特效

作者: 码农的世界你不懂 | 来源:发表于2016-12-30 09:36 被阅读0次

一、自定义动画

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 总结

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

拖拽特效

一、自定义动画

延迟执行

二、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 总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读