canvs 小球拖拽光效

2024-08-19

canvas 水滴图、液体进度条、仿加速球、圆球水波图

传送门:https://github.com/guoyoujin/WaterMoire <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> body { display: flex; flex-flow: column wrap; justify-cont

QQ中未读气泡拖拽消失的实现（参照一位年轻牛B的博主的思路自己实现了一下）

原文链接:http://kittenyang.com/drawablebubble/,博主年轻却很有思想.相仿的年纪,很佩服他! 首先分析拖拽时的图,大圆.不规则的图(实际上时有规律的不然也画不出来,这里只是代指).小圆.对,拖拽时的效果就是这三部分拼凑成的.博主大圆用了UIView 不规则的图用CAShapeLayer ,小圆也是UIView,在我自己实现时,发现其实大圆用UIView,小圆和中间那部分用CAShapeLayer就能画出来了.CAHShapeLayer 都知道给它传一个p

js仿QQ拖拽删除

原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在canvas上画出想要的效果. 原理: 1.点击圆点,生成全屏canvas,画出两个圆 , 在原地画圆,根据拉动距离变小, 在手指触控的位置,跟随手指画圆. 2.计算两圆位置,计算两圆的切点位置,通过两圆切断位置画贝塞尔曲线填充,模拟粘性. 3.判断距离是否超出最大距离,做出对应动作. 看似简单,但

js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入

前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动层层深入,到封装插件 HTML结构[加速度运动] <div id="oDiv"></div> CSS样式[加速度运动] #oDiv { position: absolute; left: 0p

超强的纯 CSS 鼠标点击拖拽效果

背景鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随,我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果,像是这样: 但是,可以看到,上面的效果中,元素的移动不是很丝滑.如果你了解上述的实现方式,就会知道它存在比较大的局限性. 本文,我们还是仅仅通过 CSS,来实现一种丝滑的鼠标点击拖动元素移动的效果. 鼠标点击拖拽跟随效果 OK,什

JavaScript动画-拖拽改变元素大小

▓▓▓▓▓▓ 大致介绍拖拽改变元素大小是在模拟拖拽上增加了一些功能效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseD

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

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

javascript动画系列第四篇——拖拽改变元素大小

× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化前面的话拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现原理简介拖拽让元素移动,是改变定位元素的left和top值实现的.而拖拽改变元素大小,则还需要改变元素的宽高范围圈定我们把改变元素大小的范围圈定在距离相应边10px的范围内左侧边界L = obj.offsetLeft + 10 右侧边界R = obj.offsetLeft + obj.offsetWidth - 10 上侧

Dropzone.js实现文件拖拽上传

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"></form>

jQuery可拖拽3D万花筒旋转特效

这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovertree.com/texiao/jquery/92/ 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat继承性: no版本: CSS3JavaScript 语法: object.style.t

CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身效果图以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你可以拾取单个的顶点. 在拾取模式为GeometryType.Line时,你可以拾取任意一个三角形里的任意一条线.即同时拾取此线段的两个顶点. 在拾取模式为GeometryType.Triangle时,你可以拾取任意一个三角形.即同时拾取此三角形的三个顶点. 实际上,CSharpGL实现了在所有渲染模

CSharpGL(20)用unProject和Project实现鼠标拖拽图元

CSharpGL(20)用unProject和Project实现鼠标拖拽图元效果图例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只是线段.还可以拖拽三角形(如下图).四边形. 另外,还可以单点拖拽. 2016-04-28 现在实现了高亮显示拾取.拖拽的图元的功能. 下面演示了鼠标移动到图元上时显示图元的索引值的功能. 起初会出现stitching和z-fighting的现象.例如下面选中一个三角形时,由于stitching问题

Asp.net中存储过程拖拽至dbml文件中，提示无法获得返回值

Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能自动生成映射文件. 不能自动生成那就自己写一张表跟存储过程返回的那张表一样就行.然后拖拽至dbml中,然后设置属性中返回类型为这张表就行了.

JavaScript动画-模拟拖拽

模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定.移动鼠标之后,我们用鼠标当前的位置即x4.y4减去x2-x1.y2-y1就可以得到方块现在的位置. 效果图:点击查看代码: <!DOCTYPE html> <html lang="en"> <head> <meta c

jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

一.原生JavaScript编写拖拽效果二.jQuery编写的拖拽效果三.在jQuery中拓展一个拖拽插件

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

React.js实现原生js拖拽效果及思考

一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

拖拽手势和清扫手势冲突时（UIPanGestureRecognizer和UISwipeGestureRecognizer冲突时）

故事发生在这样的情境上:给整个控制器添加了一个拖拽手势,然后又在控制上的每个Cell上加了左滑清扫手势,然后问题来了:只有拖拽手势起作用,而左滑手势没有效果了,然后怎么解决这个问题呢!先上图: 当给整个控制器添加了拖拽手势(UIPanGestureRecognizer),然后在控制器里面的UITableViewCell又添加了左滑清扫手势(UISwipeGestureRecognizer),造成了只有拖拽手势起了作用,而Cell的左滑手势已经不能滑动了! 解决办法就是给这两个手势设置一个优先级:

html5拖拽事件 xhr2 实现文件上传含进度条

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <meta charset="utf-8"> <meta name="viewport&

js拖拽原理和碰撞原理

拖拽的原理onmousedown 选择元素onmousemove 移动元素onmouseup 释放元素 1:如果拖拽的时候有文字:被选中,会产生问题原因:当鼠标按下的时如果页面中有文字或者图片被选中的时候,则会发生文字默认可以被拖动,因此标准 :e.preventDefalut(); 阻止他的默认行为非标准的阻止默认行为非标准:window.event.returnValue=false; 2:给某元素设置全局捕获,当我们给一个元素设置全局捕获,那么这个元素会监听后续发生的所有事件,当有事件

js拖拽效果实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta

canvs 小球拖拽光效

热门专题