拖拽特效

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

拖拽特效
仿锤子便签图片拖拽排序动画效果
Unity 在让特效显示在UI上
Gradient动画
拖拽操作
Html5 + Css 3 文件拖拽上传功能
拖拽上传
js:拖拽事件
HTML 5 拖拽
JQuery UI 拖拽排序

一、自定义动画

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 Underscore封装了常用的JavaScri...
仿锤子便签图片拖拽排序动画效果
仿锤子便签图片拖拽排序动画效果这次要模仿的是类似于锤子便签中的图片点击拖拽特效 1.使用ItemTouchHel...
Unity 在让特效显示在UI上
如题，我们现在需要让一个特效显示在UI上，但是直接拖拽特效到canvas里和节点同级也没有效果啊、它明明有在运行...
Gradient动画
效果来源于raywenderlich 由于是demo我们这个直接拖拽xib实现布局首先我们为特效这个视图单独建...
拖拽操作
应用： 1.拖拽排序2.拖拽上传3.拖拽裁剪拖拽流程确定可拖拽的内容-->开始拖拽-->拖拽过程-->结束拖拽...
Html5 + Css 3 文件拖拽上传功能
拖拽上传文件功能拖拽事件拖拽元素ondrag 应用于拖拽元素，整个拖拽过程都会调用ondragstart应用...
拖拽上传
拖拽事件拖拽元素ondrag 应用于拖拽元素，整个拖拽过程都会调用ondragstart应用于拖拽元素，...
js:拖拽事件
拖拽事件 ondragstart当拖拽元素被开始拖拽时，event：拖拽元素。[从操作系统向浏览器拖拽文件不会触发...
HTML 5 拖拽
@(HTML5)[HTML 5拖拽] [TOC] 十三、HTML 5 拖拽 HTML 5 拖拽事件图片自带拖拽功...
JQuery UI 拖拽排序
禁用拖拽：启用拖拽：

拖拽特效

一、自定义动画

延迟执行

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读