DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理
2024-05-11 02:08:12
目录
元素拖拽实现（点击拖动可视屏幕任意位置）
DOM滚轮事件处理
滚轮事件绑定
滚轮事件方向
滚轮事件兼容
滚轮缩放图片案例实现
特效动画
缓冲运动
单向缓冲运动
反复缓冲运动
简单的封装
透明度处理
多属性运动
多属性目标值问题
元素拖拽实现（点击拖动可视屏幕任意位置）
/* 拖拽 onmousedown 按下onmousemove 鼠标移动是在按下的基础之上onmouseup 抬起
*/var div = document.getElementById("div");// 绑定事件
// 鼠标按下
div.onmousedown = function (ev) {// 事件对象兼容处理ev = ev || window.event;// 阻止默认行为 拖拽元素内容有文字（选中） 或 图片 会被拖拽 ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;// IE8及以下利用阻止默认行为 阻止不了// 事件锁定 将当前事件和元素锁定到一起 IE独有的if (div.setCapture) {div.setCapture();}// 鼠标距离拖拽元素的距离var x = ev.clientX - div.offsetLeft;var y = ev.clientY - div.offsetTop;// 鼠标移动// 鼠标移动过快会离开当前拖拽元素，但是一定不会离开documentdocument.onmousemove = function (ev) {// 事件对象兼容处理ev = ev || window.event;// 获取拖拽的位置 left和topvar left = ev.clientX - x;var top = ev.clientY - y;// 边界判断var minLeft = 0,maxLeft = document.documentElement.clientWidth - div.offsetWidth;var minTop = 0,maxTop = document.documentElement.clientHeight - div.offsetHeight;if (left <= minLeft) {left = minLeft;} else if (left >= maxLeft) {left = maxLeft;}if (top <= minTop) {top = minTop;} else if (top >= maxTop) {top = maxTop;}// 设置位置div.style.left = left + 'px';div.style.top = top + 'px';}
}// 鼠标抬起
div.onmouseup = function () {// 解除事件锁定 IE独有的if(div.releaseCapture){div.releaseCapture();}// 移除鼠标移动事件document.onmousemove = null;
}DOM滚轮事件处理
滚轮事件绑定
// 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定// onmousewheel // 滚轮事件触发 滚动条会滚动是属于默认行为document.onmousewheel = function(ev){ev = ev || window.event;// 给文档绑定滚轮事件不能够阻止默认行为 就报错了// ev.preventDefault?ev.preventDefault():ev.returnValue = false;console.log("哈哈");}
var div = document.getElementsByTagName("div")[0];// 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定
div.onmousewheel = scroll;
// 火狐提供了独有的滚轮事件DOMMouseScroll (火狐浏览器只能使用DOM2绑定)
div.addEventListener("DOMMouseScroll", scroll);function scroll(ev) {ev = ev || window.event;ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;console.log("哈哈");
}滚轮事件方向
// 获取元素var div = document.getElementsByTagName("div")[0];// 绑定事件// 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定div.onmousewheel = scroll;// 火狐提供了独有的滚轮事件DOMMouseScroll (火狐浏览器只能使用DOM2绑定)div.addEventListener("DOMMouseScroll", scroll);function scroll(ev) {// 事件对象兼容处理ev = ev || window.event;// 阻止滚动条滚动的默认行为ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;// 判断滚轮的方向// 火狐以外其它浏览器，火狐下没有这个属性// console.log(ev.wheelDelta); //IE前：正数 120 后:负 -120 chrome +-150// 火狐浏浏览 // console.log(ev.detail); //前：负数 -3 后：正数 3var res = scrollEvent(ev);console.log(res);}滚轮事件兼容
//滚轮方向兼容处理function scrollEvent(event){// 判断if(event.wheelDelta){//火狐以外其它浏览器return event.wheelDelta;}else{//火狐浏浏览return event.detail * -40; }}滚轮缩放图片案例实现
<img src="./img/2.jpg" alt="测试"><script>var img = document.getElementsByTagName("img")[0];// 绑定事件img.onmousewheel = scroll;img.addEventListener("DOMMouseScroll", scroll);var n =1;// 图片缩放function scroll(ev) {// 事件对象兼容处理ev = ev || window.event;// 判断滚轮方向if(scrollEvent(ev) > 0){ //前// 放大n++;}else{ //后 // 缩小n--;} if(n<=0){n = 1;}// 设置img.style.transform = "scale("+n+")";}//滚轮方向兼容处理function scrollEvent(event) {// 判断if (event.wheelDelta) { //火狐以外其它浏览器return event.wheelDelta;} else { //火狐浏浏览return event.detail * -40;}}</script>特效动画
缓冲运动
单向缓冲运动
//单方向缓冲运动
// 获取元素
var div = document.querySelector("div");
var button = document.querySelector("button");// 绑定事件
// 20 ->1000
button.onclick = function () {// 防止用户多次点击先清除定时器clearInterval(div.timer);// 设置定时器div.timer = setInterval(function () {// 获取当前值var cur = parseFloat(getStyle(div, "left")); // 步长 (目标值 - 当前值) / 10var step = (1000 - cur) / 10;// 步长到最后都是小数 会出现小数计算精度问题step = Math.ceil(step);// 当前值等于目标值if(cur === 1000){// 清除定时器clearInterval(div.timer);}// 设置div.style.left = (cur + step) + 'px';}, 30);
}反复缓冲运动
// 获取元素
var div = document.querySelector("div");
var button = document.querySelectorAll("button");// 绑定事件
// 20 ->1000
button[0].onclick = function () {// 防止用户多次点击先清除定时器clearInterval(div.timer);// 设置定时器div.timer = setInterval(function () {// 获取当前值var cur = parseFloat(getStyle(div, "left"));// 步长 (目标值 - 当前值) / 10var step = (1000 - cur) / 10;// 步长到最后都是小数 会出现小数计算精度问题// 给step重新赋值 向上取整step = Math.ceil(step);// 当前值等于目标值if (cur === 1000) {// 清除定时器clearInterval(div.timer);}// 设置div.style.left = (cur + step) + 'px';}, 30);
}// 1000 ->20
button[1].onclick = function () {// 防止用户多次点击先清除定时器clearInterval(div.timer);// 设置定时器div.timer = setInterval(function () {// 获取当前值var cur = parseFloat(getStyle(div, "left"));// 步长 (目标值 - 当前值) / 10var step = (20 - cur) / 10;// 步长到最后都是小数 会出现小数计算精度问题// 给step重新赋值 向下取整step = Math.floor(step);// 当前值等于目标值if (cur === 20) {// 清除定时器clearInterval(div.timer);}// 设置div.style.left = (cur + step) + 'px';}, 30);
}简单的封装
/* 作用:缓冲运动@para 参数eleObj:操作的元素attr:属性target:目标值
*/function bufferMove(eleObj,attr,target){// 防止用户多次点击先清除定时器clearInterval(eleObj.timer);// 设置定时器eleObj.timer = setInterval(function(){// 先获取当前的样式值var cur = parseFloat(getStyle(eleObj,attr));// 计算步长var step = (target - cur) /10;//取整操作 小数计算存在精度问题step = step > 0 ? Math.ceil(step):Math.floor(step);// 判断到达目标值if(cur == target){clearInterval(eleObj.timer);}// 设置eleObj.style[attr] = (cur + step) + 'px';},30);
}透明度处理
/* 作用:缓冲运动@para 参数eleObj:操作的元素attr:属性target:目标值*/function bufferMove(eleObj,attr,target){// 防止用户多次点击先清除定时器clearInterval(eleObj.timer);// 设置定时器eleObj.timer = setInterval(function(){// 先获取当前的样式值// 判断如果是透明度 先扩大100倍var cur = attr == "opacity" ? parseFloat(getStyle(eleObj,attr)) * 100:parseFloat(getStyle(eleObj,attr));// 计算步长var step = (target - cur) /10;//取整操作 小数计算存在精度问题step = step > 0 ? Math.ceil(step):Math.floor(step);// 判断到达目标值if(cur == target){clearInterval(eleObj.timer);}// 设置// 判断if(attr === "opacity"){eleObj.style[attr] = (cur+step)/100;eleObj.style.filter = "alpha(opacity="+(cur+step)+")";}else{eleObj.style[attr] = (cur + step) + 'px';}},30);}多属性运动
// 绑定事件button[0].onclick = function () {bufferMove(div, {left: 300,height:600,width: 800,});}/* 作用:缓冲运动@para 参数eleObj:操作的元素tarObj:对象 {属性:目标值,属性:目标值,...}*/function bufferMove(eleObj, tarObj) {// 防止用户多次点击先清除定时器clearInterval(eleObj.timer);// 设置定时器eleObj.timer = setInterval(function () {// 迭代对象for (var attr in tarObj) {// 先获取当前的样式值// 判断如果是透明度 先扩大100倍var cur = attr == "opacity" ? parseFloat(getStyle(eleObj, attr)) * 100 : parseFloat(getStyle(eleObj, attr));// 获取当前属性对应的目标值var target = tarObj[attr];// 计算步长var step = (target - cur) / 10;//取整操作 小数计算存在精度问题step = step > 0 ? Math.ceil(step) : Math.floor(step);console.log(attr + '->' + cur + ':' + step);// 判断到达目标值(只要有一个属性到达目标值就清除定时器)if (cur == target) {cur = target;clearInterval(eleObj.timer);}// 设置// 判断if (attr === "opacity") {eleObj.style[attr] = (cur + step) / 100;eleObj.style.filter = "alpha(opacity=" + (cur + step) + ")";} else {eleObj.style[attr] = (cur + step) + 'px';}}}, 30);}
多属性目标值问题
// 绑定事件button[0].onclick = function () {bufferMove(div, {left: 100,height: 600,width: 800,});}button[1].onclick = function () {bufferMove(div, {left: 20,height: 100,width: 100,});}/* 作用:缓冲运动@para 参数eleObj:操作的元素tarObj:对象 {属性:目标值,属性:目标值,...}*/function bufferMove(eleObj, tarObj) {// 防止用户多次点击先清除定时器clearInterval(eleObj.timer);// 设置定时器eleObj.timer = setInterval(function () {// 自定义标识var flag = true; //默认值是true 表示都到达了目标值// 迭代对象for (var attr in tarObj) {// 先获取当前的样式值// 判断如果是透明度 先扩大100倍var cur = attr == "opacity" ? parseFloat(getStyle(eleObj, attr)) * 100 : parseFloat(getStyle(eleObj, attr));// 获取当前属性对应的目标值var target = tarObj[attr];// 计算步长var step = (target - cur) / 10;//取整操作 小数计算存在精度问题step = step > 0 ? Math.ceil(step) : Math.floor(step);console.log(attr + "->" + cur + ":" + step);// 判断是否到达目标值 没有到达目标值将flag的值赋值为falseif (cur != target) {flag = false;}// 设置// 判断if (attr === "opacity") {eleObj.style[attr] = (cur + step) / 100;eleObj.style.filter = "alpha(opacity=" + (cur + step) + ")";} else {eleObj.style[attr] = (cur + step) + 'px';}}// 整个for-in循环都结束了flag的值依然为true就清除定时器if (flag) {clearInterval(eleObj.timer);}}, 30);}DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理相关推荐
- jquery回弹_创意网页DOM元素拖拽弹性反弹和变形动画特效
这是一款非常有创意的HTML网页DOM元素拖拽弹性反弹和变形动画特效.这个特效中有两种效果:第一种是弹性模态窗口效果,第二种是弹性幻灯片效果.这两种效果均可以拖拽DOM元素,然后释放它们时生成非常震撼 ...
- dom 元素拖拽实现
文章目录 原生 JS 实现 div 拖拽 HTML 拖拽 API REF 之前找实习的时候,面试官出了道 "原生 JS 实现 div 元素拖拽",当时实现了个大概,不过很多细节 ...
- 实现元素拖拽放大缩小_Vue实战067：DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...
- php 元素 拖拉,Draggable Elements 元素拖拽功能实现代码_javascript技巧
当然我们可以研究js库的源码, 也可以自己去发明轮子试试看, 其过程还是挺有趣的...下面我就来实现下页面元素的拖拽功能 现在就开始着手实现, 让我们从最顶层的方法讲起, 它用于初始化一个drag o ...
- java drag drop_原生拖拽,拖放事件(drag and drop)
原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事 ...
- svg实现多个元素拖拽
下面使用到的index.css path{stroke:black;stroke-width:3;fill:none;stroke-linecap: round; } svg {} p{text-al ...
- 原生js实现元素拖拽onmousedown/onmousemove/onmouseup
文章目录 前言 一.实现思路 二.具体步骤 1.鼠标在元素上按下时 2.鼠标拖拽元素时 3.鼠标抬起事件 4.完整代码 总结 前言 我们在网页操作的时候,经常用到鼠标拖拽元素的行为.本篇文章就来讨论一 ...
- 图片img或者含有img元素拖拽时，或者scale缩放时产品的阴影效应问题
图片img或者含有img元素拖拽时,或者用scale缩放时产品的阴影效应问题 html中有图片img或者含有img元素拖拽时,或者scale缩放时产品的阴影效应问题,也就是图片重影, 另外使用scal ...
- android地图拖动事件,地图拖拽相关事件
事件系统 html, body, #container { width: 100%; height: 100%; } 请用鼠标拖拽地图试试 地图拖拽相关事件 绑定事件 解绑事件 //初始化地图对象,加 ...
最新文章
- 【612页】Android 大厂面试题及解析大全（中高级）
- Golang闭包陷阱
- mongodb之 复制集维护小结
- Scala分支控制 if-else之单分支的使用
- 多线程搜索磁盘上的文件
- 小师妹学JavaIO之:文件编码和字符集Unicode
- 【朋友圈精选】web前端招聘面试的10个小分享
- Oracle Database 12c 新特性：RAC Cluster Hub Node 和 Leaf Node
- Spring-beans-BeanWrapper
- 第三次大作业-作业准备
- 程序员告诉你如何用技术手段玩转冲顶大会
- ASP.NET:判断session是否合法示例
- HTTP URL长度限制
- Web前端学习路线笔记（六）html5
- UEFI——PCI/PCIe
- debug——程序停止正常工作
- c语言 派生,继承和派生
- IMDB数据集allow_pickle=False问题
- shiro权限管理实例
- C++约瑟夫环（又称丢手绢）解决---最简单的理解