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                 }

  

时间: 2024-10-15 12:10:34

JavaScript动画-磁性吸附的相关文章

javascript动画系列第二篇——磁性吸附

× 目录 [1]范围限定 [2]拖拽范围 [3]磁性吸附 前面的话 上一篇,我们介绍了元素拖拽的实现.但在实际应用中,常常需要为拖拽的元素限定范围.而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果 范围限定 如果我们限定元素只可以在可视范围内移动,那么就需要对其进行范围限定 首先,先要搞清楚是可视区域限定被拖拽元素 左侧范围L0 = 0 右侧范围R0 = document.documentElement.clientWidth 上侧范围T0 = 0 下侧范围B0 = documen

javascript动画系列第三篇——碰撞检测

前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多,接下来使用九宫格分析法 假设黄色元素要与红色元素进行碰撞.将红色元素所处的区域分为9部分,自身处于第9部分,周围还存在8个部分.只要黄色元素进入红色元素的第9部分,就算碰撞.否则,都算未碰撞 总共分为以下5种情况: 1.处于上侧未碰撞区域——1.2.3区域 2.处于右侧未碰撞区域——3.4.5区域

限制范围拖拽,磁性吸附。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body { margin: 0;}#wrap { margin: 50px auto; position: relative; border: 1px s

javascript动画效果之缓冲动画(修改版)

在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数one和two无法被导入,所以需要做以下代码改进和优化 原版的html和css代码在这里javascript动画效果之缓冲动画 js代码如下 1 <script> 2 function $(id) { 3 return typeof id === &

JavaScript动画知多少?

今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval 或 setTimeout API,高频改变DOM元素的一些属性,即可创造一个肉眼可见的动画效果.一个看起来非常流畅的JS动画除了需要良好的变换算法外,与其执行宿主也是非不开的.程序写得再好,如果浏览器过于老旧,电脑CPU性能低下,也会出现卡顿,甚至卡死. 执行一个动画函数对于浏览器来说是个苦差,设置

Javascript动画效果(四)

Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1

JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本

原文:JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本 一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页面大概内容是什么. 效果图: 2.实现这个效果的思路 (1)把主页的几个链接的背景图片缩放到150px*150px,拼成一张750*150的图片,并保存为slideshow.png,存放到ima

javascript动画系列第一篇——模拟拖拽

× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛.javascript动画广泛使用的还是模拟拖拽.本文将详细介绍该内容 原理介绍 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束 所以,拖拽的重点是确定被拖拽元素是如何移动的

慕课网javascript动画特效 多透明度 源代码

慕课网javascript动画特效 多透明度 源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多物体运动</title> <style> div{ width:200px; height:100px; background:yellow; margin-bottom: 20px; filte