介绍 & lt; !DOCTYPE html>
& lt; html lang=皕h-CN"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Document
https://www.yisu.com/zixun/& lt;脚本src=" jquery.js ">
<时尚>
* {
保证金:0;
填充:0;
}
.wrap {
宽度:400 px;
身高:200 px;
边界:1 px固体# ccc;
border-right-color:红色;
位置:绝对的;
上图:50%;
左:50%;
margin-left: -200 px;
margin-top: -100 px;
box-sizing: border-box;
}
.wrap .head {
高度:40像素;
padding-left: 4 px;
padding-right: 4 px;
background - color: # ccc;
box-sizing: border-box;
行高:40像素;
用户选择:没有;
}
.head:{徘徊
光标:移动;
}
.head跨度{
浮:左;
}
#{密切
浮:正确;
}
#关闭:{徘徊
光标:指针;
}>
汤姆
<脚本>
让包装=document.querySelector (“.wrap”);
让近=. getelementbyid(“关闭”);
让头=document.querySelector (“.head”);
头。onmousedown=function (e) {//获得鼠标在头中的坐标
让x=e。pageX - wrap.offsetLeft;
让y=e。pageY - wrap.offsetTop;
控制台。日志(x, y);
文档。onmousemove=function (e) {
让xx=e。pageX - x;
让yy=e。pageY - y;//设置边界限制
xx=xx <0 & # 63;0:xx;
yy=yy <0 & # 63;0:yy;
如果(xx>=innerWidth - wrap.offsetWidth) {
document.documentElement。scrollLeft=20;
其他}{
document.documentElement。scrollLeft=0;
}
xx=xx> innerWidth—包装。offsetWidth & # 63;innerWidth-wrap。offsetWidth: xx;
yy=yy> innerHeight—包装。offsetHeight + document.documentElement。scrollTop & # 63;innerHeight—包装。offsetHeight + document.documentElement。scrollTop: yy;
wrap.style。左=xx +“px”;
wrap.style。顶级=yy +“px”;//禁止X滚动轴
document.body.style。overflowX='隐藏';
wrap.style。marginLeft=0;
wrap.style。marginTop=0;
}；
}；
文档。onmouseup=function () {
文档。onmousemove=零;
}；
关闭。onclick=function () {
wrap.style。显示='没有';
}；>
这篇文章主要介绍了js是如何实现盒子拖拽动画效果的,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
具体代码:
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
汤姆
试着拖拽我
【关闭】