zoukankan      html  css  js  c++  java
  • JavaScript动画-磁性吸附

    ▓▓▓▓▓▓ 大致介绍

      磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果,如果对模拟拖拽有疑问的同学请移步模拟拖拽

      源代码、效果:点这里

    ▓▓▓▓▓▓ 范围限定(可视区)

      先来看一个在可视区范围内的模拟拖拽,我们先要搞清楚可视区的范围。

      可视区就是用户可以看到的区域,有上、下、左、右四个范围

      上:T = 0

      下:B = document.documentElement.clientHeight

      左:L = 0

      右:R = document.documentElement.clientWidth

      

      我们控制div在可视区范围内拖拽就是设置div的left和top值,从下图我们可以看到left和top应设置的值

      代码中用L和R记录方块的坐标值

      代码如下:

     1                 if(L < 0){
     2                     // 左侧范围
     3                     L = 0;
     4                 }else if(L > document.documentElement.clientWidth - obj.offsetWidth){
     5                     // 右侧范围
     6                     L = document.documentElement.clientWidth - obj.offsetWidth;
     7                 }
     8                 if(T < 0){
     9                     // 上侧范围
    10                     T = 0;
    11                 }else if(T > document.documentElement.clientHeight - obj.offsetHeight){
    12                     // 下侧范围
    13                     T = document.documentElement.clientHeight - obj.offsetHeight;
    14                 }

      

    ▓▓▓▓▓▓ 磁性吸附

      磁性吸附就是在范围限定的基础上改进得来的

      如图:

      我们把方块拖到距离可视区边界30px的位置,放快就自动的吸附到边框上。

      代码:

     1                 if(L < 50){
     2                     // 左侧范围
     3                     L = 0;
     4                 }else if(L > document.documentElement.clientWidth - obj.offsetWidth - 50){
     5                     // 右侧范围
     6                     L = document.documentElement.clientWidth - obj.offsetWidth;
     7                 }
     8                 if(T < 50){
     9                     // 上侧范围
    10                     T = 0;
    11                 }else if(T > document.documentElement.clientHeight - obj.offsetHeight - 50){
    12                     // 下侧范围
    13                     T = document.documentElement.clientHeight - obj.offsetHeight;
    14                 }

      

  • 相关阅读:
    【Luogu】P3369 【模板】普通平衡树(树状数组)
    文艺平衡树 lg3391(splay维护区间入门)
    普通平衡树 lg3369
    noip2018游记
    webview与壳交互的几种方式
    iOS、Android 之类的如何调试 Web APP
    box-sizing属性
    Hybridapp /webapp调试工具
    DOS 批处理高级教程精选合编
    瀑布流Masonry学习
  • 原文地址:https://www.cnblogs.com/qqandfqr/p/6147440.html
Copyright © 2011-2022 走看看