拖拽效果dome

编程入门 行业动态 更新时间:2024-10-28 02:28:23

<a href=https://www.elefans.com/category/jswz/34/1765858.html style=拖拽效果dome"/>

拖拽效果dome

<script type="text/javascript">var oipc = document.getElementById('pic');var isDrag = false;//是否开始拖拽 false 不拖拽var disX, disY;//图片相对于图片的位置//鼠标按下时oipc.onmousedown = function (e) {isDrag = true;this.style.cursor = 'move';e = e || window.event;//兼容性写法//鼠标位置var x = e.clientX;var y = e.clientY;//鼠标相对于图片的位置disX = x - this.offsetLeft;disY = y - this.offsetTop;}//鼠标移动时document.onmousemove = function (e) {if (!isDrag) {return;}e = e || window.event;//兼容性写法//鼠标位置var x = e.clientX;var y = e.clientY;//修改图片位置oipc.style.left = x - disX + 'px';oipc.style.top = y - disY + 'px';}//鼠标抬起时document.onmouseup = function () {isDrag = false;oipc.style.cursor = 'default';}
</script>

更多推荐

拖拽效果dome

本文发布于:2024-03-08 14:23:13,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1721124.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:拖拽   效果   dome

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!